1、使用npm的預設配置初始化一個項目 nom init -y 2、安裝並使用當前目錄下的webpack，需要先卸載全局的webpack npm uninstall webpack web pack-cli -g 3、將webpack安裝在當前目錄下，好處是不同工程適配不同版本的webpack np ...
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不對此類文件做處理
