1、使用npm的默認配置初始化一個專案
nom init -y
2、安裝并使用當前目錄下的webpack，需要先卸載全域的webpack
npm uninstall webpack web pack-cli -g
3、將webpack安裝在當前目錄下，好處是不同工程適配不同版本的webpack
npm install webpack webpack-cli -D
4、安裝任意版本的webpack（例：4.16.5版本）
先查看webpack的各種版本資訊：npm info webpack
再安裝：npm install [email protected] web pack-cli -D
5、當前目錄下的webpack命令需要加npx
npx webpack
6、 組態檔webpack.config.json基本格式
module.exports={
entry: ‘./index.js’, //入口檔案路徑
output: {
filename: ‘bundle.js’, //輸出檔案名
path: path.resolve(__direname, ‘bundle’) //輸出檔案的絕對路徑
}
}
7、package.json中修改script欄位可變更打包命令，例：npm run build
"scripts": {
"build": "webpack"
},
8、打包非js檔案時需要使用loader，組態檔中增加module欄位
module:{
rules:[{
test: /\.jpg|png|gif$/, //遇到jpg或png或gif格式的檔案時
use: {
loader: ‘file-loader’, //使用file-loader
options: {
name: ‘[name].[ext]’, //file-loader組態檔名及后綴格式
}
}
}]
}
9、使用url-loader可以將檔案轉換成base64的url字串，這樣的好處是減少了一次http請求，
url-loader內嵌了file-loader，不需要重復安裝file-loader
module:{
rules:[{
test: /\.jpg|png|gif$/, //遇到jpg或png或gif格式的檔案時
use: {
loader: ‘url-loader’,
options: {
name: ‘[name].[ext]’, //file-loader組態檔名及后綴格式
outputPath: ‘images/’, //將這類生成的檔案放在images檔案夾下
limit: 204800 //小于200KB的檔案使用url-loader，否則使用file-loader
}
}
}]
}
10、打包css、scss等樣式檔案時的配置
module:{
rules[{
test: /\.css|scss$/,
use:[
’style-loader’,
{
loader:’css-loader’,
options: {
importLoaders: 2, //遇到新的css引入，從下往上重新走一遍loader的決議
modules: true //使用css的模塊模式，引入樣式只在當前js檔案有效，不影響子檔案
}
},
‘sass-loader’,
‘postcss-loader’
]
}]
}
11、htmlWepackPlugin會在打包結束后自動生成html檔案，并將打包生成的JS檔案
自動引入這個html中，也可以手動配置html模版
const htmlWebpackPlugin = require(‘html-webpack-plugin’) //引入html打包插件
plugins:[
new htmlWebpackPlugin({template: ’src/index.html’}). //使用src目錄下的index.html作為模版
]
12、cleanWebpackPlugin能夠再打包前清理打包輸出目錄，
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
Plugins:[
new CleanWebpackPlugin(‘dist’) //dist為打包檔案輸出目錄
]
13、source-map是源代碼和打包代碼的映射關系，cheap表示只精確到行且不映射loader等插件，module表示連同第三方插件和loader的映射也輸出
eval表示通過sourceURL關聯業務代碼模塊而不生成sourceMap檔案，eval-source-map將生成的.map檔案內容替換成嵌入sourceURL
devtool:’cheap-module-eval-source-map’ //開發環境最佳模式
14、加上—wathc命令后修改檔案會自動打包（npm run webpack —watch），
但是這種方法只是將html頁面當作靜態界面訪問，無法實作http請求或是ajax請求（產生跨域問題）
15、webpack-dev-server能夠通過啟動一個http服務器來完成代碼變化時自動打包，同時更多的配置還能夠
實作自動打開瀏覽器，無重繪修改頁面等功能
啟動服務器命令：npm run web pack-dev-server
webpack.config.js中的基礎配置：
devServere:{
contentBase: ‘./build’ //打包檔案生成目錄
open: true //啟動服務器時自動打開一個服務器
port: 8080 //啟動埠為8080
}
16、webpack作為API在node中使用時，可以通過npm安裝引入express服務器模塊、webpack-dev-middleware打包模塊
來自己實作一個帶有自動打包功能的服務器（webpack-dev-server就是以上兩個模塊組合撰寫出來的），
17、當修改檔案后不想手動重繪頁面時需要使用熱模塊更新插件
webpack.config.js配置：
const webpakc = require(“webpack”)
devServe:{
contentBase: ”./dist”,
hot: “true”, //開啟熱更新
hotOnly: true //熱更新失效時是否自動重繪頁面
},
plugins:[ new webpack.HotMoudleReplacementPlugin() ] //插件引入
18、ES6語法轉ES5語法使用babel的webpack.config.js配置
module:{
rules: [
test: /\.js$/,
exclude: /node_modules/, //對該目錄下的檔案不做處理
loader: “babel-loader”,
options: {
presets:[ [“@babel/preset-env”,{
useBuiltIns: ‘usage’ //只對參考到的ES6語法做轉化，設定此引數后不需要在檔案中引入”@babel/polyfill”
}] ]
}
]
}
19、preset-env會污染全域變數，因此在寫類別庫或組件庫時最好代替使用plugin-transform-runtime，
它會將babel以閉包的的方式引入，不會污染全域變數，若babel的配置項過多，
則可以將配置寫進檔案名為.balbelrc的組態檔中
20、在匯入模塊時，tree shaking能夠過濾掉模塊中不被參考部分，而只匯入參考部分，
它只識別和優化ESmodule方式（import）的靜態引入，不支持優化CommonJS(require)方式的動態引入
tree shaking的webpack.config,js中的配置
optimization:{
usedExports: true //開啟tree Shaking，便可只匯入模塊中被參考部分
}
在package.json中的配置：
“sideEffects”:[ “*.js”] //使tree Shaking不對此類檔案做處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145753.html
標籤：JavaScript