├── build
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
│ ├── webpack.rules.conf.js
├── src
│ ├── css
│ ├── js
│ ├── images
│ ├── assets
│ ├── pages
│ │ ├── index
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ └── index.scss
│ │ ├── login
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ └── index.scss

entry: {
  // 多入口文件
  index: ['./src/pages/index/index.js',],
  login: './src/pages/login/index.js',
 },

npm install webpack-dev-server --save-dev
//修改 webpack.dev.conf.js代碼

devServer: {
 contentBase: path.join(__dirname, "../dist"),
 publicPath:'/',
 host: "127.0.0.1",
 port: "8089",
 overlay: true, // 瀏覽器頁面上顯示錯誤
 // open: true, // 開啟自動打開瀏覽器
 // stats: "errors-only", //stats: "errors-only"表示只打印錯誤：
 hot: true // 開啟熱更新
},
//修改package.json
scripts: {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
 "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js",
 "server": "live-server ./ --port=8888"
},

{
 test: /\.(css|scss|sass)$/,
 // 不分離的寫法
 // use: ["style-loader", "css-loader",sass-loader"]
 // 使用postcss不分離的寫法
 // use: ["style-loader", "css-loader", sass-loader","postcss-loader"]
 // 此處為分離css的寫法
 /*use: extractTextPlugin.extract({
  fallback: "style-loader",
  use: ["css-loader", "sass-loader"],
  // css中的基礎路徑
  publicPath: "../"
 })*/
 // 此處為使用postcss分離css的寫法
 use: extractTextPlugin.extract({
  fallback: "style-loader",
  use: ["css-loader", "sass-loader", "postcss-loader"],
  // css中的基礎路徑
  publicPath: "../"

 })
},
{
 test: /\.js$/,
 use: ["babel-loader"],
 // 不檢查node_modules下的js文件
 exclude: "/node_modules/"
}, {
 test: /\.(png|jpg|gif)$/,
 use: [{
  // 需要下載file-loader和url-loader
  loader: "url-loader",
  options: {
   limit: 5 * 1024,//小于這個時將會已base64位圖片打包處理
   // 圖片文件輸出的文件夾
   outputPath: "images"
  }
 }]
}

npm install extract-text-webpack-plugin --save-dev 
//這個插件在webpack4.x 運行時會有點問題,后面會提到
//修改 webpack.base.conf.js代碼
// 分離css插件參數為提取出去的路徑
new extractTextPlugin({
 filename: 'css/[name].[hash:8].min.css',
}),
5.處理css3屬性前綴，消除冗余的css代碼并壓縮css

//屬性自動加前綴
npm install postcss-loader --save-dev 
//在根目錄新建postcss.config.js
module.exports = {
 plugins: [
  require('autoprefixer')//自動添加css前綴
 ]
};
//loader里加入postcss
{
 test: /\.(css|scss|sass)$/,
 // 此處為使用postcss分離css的寫法
 use: extractTextPlugin.extract({
  fallback: "style-loader",
  use: ["css-loader", "sass-loader", "postcss-loader"],
  // css中的基礎路徑
  publicPath: "../"

 })
}
//修改package.json 加入css要兼容瀏覽器版本的代碼
"browserslist": [
 "defaults",
 "not ie < 11",
 "last 2 versions",
 "> 1%",
 "iOS 7",
 "last 3 iOS versions"
]
//消除冗余css代碼 使用glob模塊去匹配文件所以還要安裝glob模塊
npm install purifycss-webpack --save-dev 
new purifyCssWebpack({
 paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))
}),
//壓縮css
npm install optimize-css-assets-webpack-plugin --save-dev 
//壓縮css
//修改 webpack.prod.conf.js代碼
new OptimizeCSSPlugin({
 cssProcessorOptions: {
  safe: true
 }
}),

npm install clean-webpack-plugin --save-dev 
//修改 webpack.prod.conf.js代碼
//刪除dist目錄
new cleanWebpackPlugin(['dist'], {
 root: path.resolve(__dirname, '../'), //根目錄
 // verbose Write logs to console.
 verbose: true, //開啟在控制臺輸出信息
 // dry Use boolean "true" to test/emulate delete. (will not remove files).
 // Default: false - remove files
 dry: false,
}),

npm install uglifyjs-webpack-plugin --save-dev 
//修改 webpack.prod.conf.js代碼
//上線壓縮 去除console等信息webpack4.x之后去除了webpack.optimize.UglifyJsPlugin
//https://github.com/mishoo/UglifyJS2/tree/harmony#compress-options
new UglifyJSPlugin({
 uglifyOptions: {
  compress: {
   warnings: false,
   drop_debugger: false,
   drop_console: true
  }
 }
}),

// webpack4里面移除了commonChunksPulgin插件，放在了config.optimization里面,提取js， vendor名字可改
optimization: {
 splitChunks: {
  cacheGroups: {
   vendor: {
    // test: /\.js$/,
    test: /[\\/]node_modules[\\/]/,
    chunks: "initial", //表示顯示塊的范圍，有三個可選值：initial(初始塊)、async(按需加載塊)、all(全部塊)，默認為all;
    name: "vendor", //拆分出來塊的名字(Chunk Names)，默認由塊名和hash值自動生成；
    enforce: true,
   }
  }
 }
},
//項目里配置了自動提取node_modules里用到的模塊如jquery，也可以在原模板里面通過第三方cdn引入，又是另一種配置了。

externals: {
 'jquery': 'window.jQuery'
},
//externals就是webpack可以不處理應用的某些依賴庫，使用externals配置后，依舊可以在代碼中通過CMD、AMD或者window/global全局的方式訪問。

npm install copy-webpack-plugin --save-dev 
//靜態(tài)資源輸出,將src目錄下的assets文件夾復制到dist目錄下
new copyWebpackPlugin([{
 from: path.resolve(__dirname, "../src/assets"),
 to: './assets',
 ignore: ['.*']
}]),

npm install html-webpack-plugin --save-dev 
//修改webpack.base.conf.js代碼
// 獲取html-webpack-plugin參數的方法
var getHtmlConfig = function (name, chunks) {
 return {
  template: `./src/pages/${name}/index.html`,
  filename: `${name}.html`,
  // favicon: './favicon.ico',
  // title: title,
  inject: true,
  hash: true, //開啟hash ?[hash]
  chunks: chunks,//頁面要引入的包
  minify: process.env.NODE_ENV === "development" ? false : {
   removeComments: true, //移除HTML中的注釋
   collapseWhitespace: true, //折疊空白區(qū)域 也就是壓縮代碼
   removeAttributeQuotes: true, //去除屬性引用
  },
 };
};
//配置頁面
const htmlArray = [{
  _html: 'index',
  title: '首頁',
  chunks: ['vendor', 'index']//頁面用到的vendor模塊
 },
 {
  _html: 'login',
  title: '登錄',
  chunks: ['login']
 },
];
//自動生成html模板
htmlArray.forEach((element) => {
 module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
})

npm install webpack-bundle-analyzer --save-dev 
//修改 webpack.prod.conf.js代碼
new BundleAnalyzerPlugin()
//npm run build 后會打開一個頁面

npm install extract-text-webpack-plugin@next