淺談webpack4.x 入門(一篇足矣)
前言：
webpack4出了以后，一些插件變化很大，和之前的版本使用方式不一樣，新手入坑，本篇將介紹如何從一開始配置webpack4的開發(fā)版本，對css，js進(jìn)行編譯打包合并生成md5，CSS中的圖片處理，js自動(dòng)注入html頁，刪除指定文件，提取公共文件，熱更新等等。
安裝
//全局安裝 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將會生成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>
打開瀏覽器將會看到之前設(shè)置的js文件生效
對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]會在后面生成隨機(jī)hash值
path: path.join(__dirname, "dist")
},
module: { // 處理對應(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將會看到一個(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將會看到dist中有一個(gè)images文件夾中有一張圖片，打開index.html
js自動(dòng)注入html文件
使用插件html-webpack-plugin，可以將生成的js自動(dòng)引入html頁面，不用手動(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: [// 對應(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，打開便可以看到。
刪除指定文件
使用插件clean-webpack-plugin，刪除指定文件，更多配置，查看clean-webpack-plugin
npm install clean-webpack-plugin --save-dev
配置webpack.config.js文件
const CleanWebpackPlugin = require('clean-webpack-plugin');//引入
plugins: [// 對應(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文件，為什么要提取公共代碼，簡單來說，就是減少代碼冗余，提高加載速度。和之前的webpack配置不一樣：
//之前配置
// new webpack.optimize.SplitChunksPlugin({
// name: 'common', // 如果還要提取公共代碼,在新建一個(gè)實(shí)例
// minChunks: 2, //重復(fù)兩次之后就提取出來
// 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)先級，防止和自定義的公共代碼提取時(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ù)器，可以用來預(yù)覽打包后項(xiàng)目
inline:true,//打包后加入一個(gè)websocket客戶端
hot:true,//熱加載
contentBase: path.resolve(__dirname, 'dist'),//開發(fā)服務(wù)運(yùn)行時(shí)的文件根目錄
host: 'localhost',//主機(jī)地址
port: 9090,//端口號
compress: true//開發(fā)服務(wù)器是否啟動(dòng)gzip等壓縮
},
配置package.json
"scripts": {
"dev": "webpack-dev-server --mode development"
},
執(zhí)行npm run dev 訪問 http://localhost:9090/
隨便修改任一文件便會自動(dòng)刷新網(wǎng)站顯示修改相應(yīng)內(nèi)容。
總結(jié)：
webpack4還有很多很多配置，例如css的拆分呀，less sass配置呀，js編譯es6呀，多入口配置呀，生產(chǎn)環(huán)境配置，js沒有使用的模塊自動(dòng)檢測剝離等等，只能等下次有空在總結(jié)，感謝大家的觀看，新手入坑，歡迎指出錯(cuò)誤的地方。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
前端開發(fā)基礎(chǔ)javaScript的六大作用
這篇文章主要介紹了前端開發(fā)基礎(chǔ)javaScript的六大作用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了檢查表單元素的值是否為空的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06![JS數(shù)組降維的實(shí)現(xiàn)Array.prototype.concat.apply([], arr)](http://img.jbzj.com/images/xgimg/bcimg2.png)
JS數(shù)組降維的實(shí)現(xiàn)Array.prototype.concat.apply([], arr)
這篇文章主要介紹了JS數(shù)組降維的實(shí)現(xiàn)Array.prototype.concat.apply([], arr)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因?yàn)閕e11取消了很多低版本的判斷，很多js都需要修改了，這里簡單介紹下需要的朋友可以參考下2015-12-12
JS call()及apply()方法使用實(shí)例匯總
這篇文章主要介紹了JS call()及apply()方法使用實(shí)例匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了解決微信小程序防止無法回到主頁的問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了ionic3 懶加載的相關(guān)資料,需要的朋友可以參考下2017-08-08
JavaScript設(shè)置彈出式獨(dú)立窗口頁面和window的方法舉例詳解
window.open是網(wǎng)頁中經(jīng)常遇到的彈出窗口代碼,不是網(wǎng)絡(luò)中比較反感的那類彈出代碼,下面這篇文章主要給大家介紹了關(guān)于JavaScript設(shè)置彈出式獨(dú)立窗口頁面和window的方法,需要的朋友可以參考下2024-01-01
懶加載,前端人都知道的一種性能優(yōu)化方式,簡單的來說,只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí),才設(shè)置圖片正真的路徑,讓圖片顯示出來,這篇文章主要給大家介紹了關(guān)于小程序列表懶加載的實(shí)現(xiàn)方式,需要的朋友可以參考下2022-04-04
JavaScript中類型的強(qiáng)制轉(zhuǎn)換與隱式轉(zhuǎn)換詳解
類型強(qiáng)制Coercion是將值從一種類型轉(zhuǎn)換為另一種類型的過程（例如字符串轉(zhuǎn)換為數(shù)字,對象轉(zhuǎn)換為布爾值等）,下面這篇文章主要給大家給大家介紹了JavaScript中類型的強(qiáng)制轉(zhuǎn)換與隱式轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2021-08-08