淺談webpack4.x 入門(一篇足矣)
前言:
webpack4出了以后,一些插件變化很大,和之前的版本使用方式不一樣,新手入坑,本篇將介紹如何從一開(kāi)始配置webpack4的開(kāi)發(fā)版本,對(duì)css,js進(jìn)行編譯打包合并生成md5,CSS中的圖片處理,js自動(dòng)注入html頁(yè),刪除指定文件,提取公共文件,熱更新等等。
安裝
//全局安裝 npm install -g webpack webpack-cli
創(chuàng)建文件夾初始化
//創(chuàng)建文件夾 mkdir webpack4demo //進(jìn)入 cd webpack4demo //初始化 npm init -y
創(chuàng)建文件夾scripts 里面創(chuàng)建index.js文件
index.js
const s=()=>{ console.log('s init') } s()
創(chuàng)建webpack.config.js文件
webpack.config.js
const path = require("path"); module.exports = { entry: { index: "./scripts/index.js" //入口文件,若不配置webpack4將自動(dòng)查找src目錄下的index.js文件 }, output: { filename: "[name].bundle.js",//輸出文件名,[name]表示入口文件js名 path: path.join(__dirname, "dist")//輸出文件路徑 } }
執(zhí)行webpack --mode development將會(huì)生成dist/index.bundle.js
創(chuàng)建index.html,并引入js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$Title$</title> </head> <body> $END$ </body> <script src="./dist/index.bundle.js"></script> </html>
打開(kāi)瀏覽器將會(huì)看到之前設(shè)置的js文件生效
對(duì)css,js進(jìn)行編譯打包合并生成md5
創(chuàng)建a.js,c.js,a.css,更改index.js
a.js
import acss from './a.css' import c from './c.js' const a={ init(){ console.log("a init bbbaaa") }, cinit(){ c.init() } } export default a;
c.js
const c={ init(){ console.log("ccccc") } } export default c;
a.css
body{ background-color: #6b0392; }
index.js
import a from './a.js' import c from './c.js' const s=()=>{ a.init() a.cinit() c.init() console.log('s init') } s()
配置webpack.config.js文件
const path = require("path"); module.exports = { entry: { index: "./scripts/index.js" }, output: { filename: "[name].bundle.[hash].js",//[hash]會(huì)在后面生成隨機(jī)hash值 path: path.join(__dirname, "dist") }, module: { // 處理對(duì)應(yīng)模塊 rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]//處理css } ] }, }
安裝style-loader, css-loader
npm install style-loader css-loader --save-dev
執(zhí)行webpack --mode development將會(huì)看到一個(gè)帶md5值得js文件,將他引入html中
CSS中的圖片處理
安裝url-loader, file-loader
npm install url-loader file-loader --save-dev
修改a.css 將一張圖片放到scripts目錄
body{ background-image: url("./timg.jpg"); background-color: #a748ca; }
配置webpack.config.js文件
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test:/\.(png|jpg|gif)$/, use:[{ loader:'url-loader', options:{ outputPath:'images/',//輸出到images文件夾 limit:500 //是把小于500B的文件打成Base64的格式,寫入JS } }] } ] },
執(zhí)行webpack --mode development將會(huì)看到dist中有一個(gè)images文件夾中有一張圖片,打開(kāi)index.html
js自動(dòng)注入html文件
使用插件html-webpack-plugin,可以將生成的js自動(dòng)引入html頁(yè)面,不用手動(dòng)添加
//安裝html-webpack-plugin npm install html-webpack-plugin --save-dev //安裝webpack webpack-cli npm install webpack webpack-cli --save-dev
配置webpack.config.js文件
const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin module.exports = { entry: { index: "./scripts/index.js" }, output: { filename: "[name].bundle.[hash].js", path: path.join(__dirname, "dist") }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [// 對(duì)應(yīng)的插件 new HtmlWebpackPlugin({ //配置 filename: 'index.html',//輸出文件名 template: './index.html',//以當(dāng)前目錄下的index.html文件為模板生成dist/index.html文件 }), ] }
執(zhí)行webpack --mode development 記得要講之前手動(dòng)引入的script刪除,便可以看到dist那里自動(dòng)生成一個(gè)index.html,打開(kāi)便可以看到。
刪除指定文件
使用插件clean-webpack-plugin,刪除指定文件,更多配置,查看clean-webpack-plugin
npm install clean-webpack-plugin --save-dev
配置webpack.config.js文件
const CleanWebpackPlugin = require('clean-webpack-plugin');//引入 plugins: [// 對(duì)應(yīng)的插件 new HtmlWebpackPlugin({ //配置 filename: 'index.html',//輸出文件名 template: './index.html',//以當(dāng)前目錄下的index.html文件為模板生成dist/index.html文件 }), new CleanWebpackPlugin(['dist']), //傳入數(shù)組,指定要?jiǎng)h除的目錄 ]
執(zhí)行webpack --mode development
,可以看到dist目錄被刪除,又生成一個(gè)新的dist,之前的js文件已經(jīng)被刪除。
提取公共文件
我們可看到a.js和index.js都引入了c.js文件,為什么要提取公共代碼,簡(jiǎn)單來(lái)說(shuō),就是減少代碼冗余,提高加載速度。和之前的webpack配置不一樣:
//之前配置 // new webpack.optimize.SplitChunksPlugin({ // name: 'common', // 如果還要提取公共代碼,在新建一個(gè)實(shí)例 // minChunks: 2, //重復(fù)兩次之后就提取出來(lái) // chunks: ['index', 'a'] // 指定提取范圍 // }), //現(xiàn)在配置 optimization: { splitChunks: { cacheGroups: { commons: { // 抽離自己寫的公共代碼 chunks: "initial", name: "common", // 打包后的文件名,任意命名 minChunks: 2,//最小引用2次 minSize: 0 // 只要超出0字節(jié)就生成一個(gè)新包 }, vendor: { // 抽離第三方插件 test: /node_modules/, // 指定是node_modules下的第三方包 chunks: 'initial', name: 'vendor', // 打包后的文件名,任意命名 // 設(shè)置優(yōu)先級(jí),防止和自定義的公共代碼提取時(shí)被覆蓋,不進(jìn)行打包 priority: 10 }, } } },
下載jq npm install jquery --save
在a.js,index.js引用 import $ from 'jquery'
輸出$
生成3個(gè)js文件,執(zhí)行webpack --mode development
熱更新,自動(dòng)刷新
我們將用到webpack-dev-serve,webpack-dev-server
就是一個(gè)基于Node.js和webpack的一個(gè)小型服務(wù)器,它有強(qiáng)大的自動(dòng)刷新和熱替換功能。
安裝webpack-dev-serve
npm install webpack-dev-serve --save-dev
配置webpack.config.js文件
const webpack = require("webpack"); plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './index.html', }), new CleanWebpackPlugin(['dist']), //傳入數(shù)組,指定要?jiǎng)h除的目錄 // 熱更新,熱更新不是刷新 new webpack.HotModuleReplacementPlugin() ], devServer: {//配置此靜態(tài)文件服務(wù)器,可以用來(lái)預(yù)覽打包后項(xiàng)目 inline:true,//打包后加入一個(gè)websocket客戶端 hot:true,//熱加載 contentBase: path.resolve(__dirname, 'dist'),//開(kāi)發(fā)服務(wù)運(yùn)行時(shí)的文件根目錄 host: 'localhost',//主機(jī)地址 port: 9090,//端口號(hào) compress: true//開(kāi)發(fā)服務(wù)器是否啟動(dòng)gzip等壓縮 },
配置package.json
"scripts": { "dev": "webpack-dev-server --mode development" },
執(zhí)行npm run dev
訪問(wèn) http://localhost:9090/
隨便修改任一文件便會(huì)自動(dòng)刷新網(wǎng)站顯示修改相應(yīng)內(nèi)容。
總結(jié):
webpack4還有很多很多配置,例如css的拆分呀,less sass配置呀,js編譯es6呀,多入口配置呀,生產(chǎn)環(huán)境配置,js沒(méi)有使用的模塊自動(dòng)檢測(cè)剝離等等,只能等下次有空在總結(jié),感謝大家的觀看,新手入坑,歡迎指出錯(cuò)誤的地方。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07使用 JavaScript如何獲取當(dāng)月的第一天和最后一天
這篇文章主要介紹了使用 JavaScript如何獲取當(dāng)月的第一天和最后一天,通過(guò)本文學(xué)習(xí)了如何使用 JavaScript 中的Date.getFullYear()和?Date.getMonth()方法獲得某個(gè)特定月份的第一天和最后一天,需要的朋友可以參考下2023-05-05Javascript hasOwnProperty 方法 & in 關(guān)鍵字
hasOwnProperty :如果 object 具有指定名稱的屬性,那么方法返回 true;反之則返回 false。2008-11-11