webpack配置看這裡就夠了
webpack簡述
webpack簡單來說就是一個模組打包器,也是目前最流行的前端構建工具之一,他將整個專案根據依賴關係通過各種loader與plugin的處理後進行打包;可以實現對程式碼的各種處理,比如less、sass、stylus的解析,ecmascript版本的轉換、程式碼的壓縮分割等等
webpack之loader
loader可以說是webpack最核心的部分,前面所說的各種功能大部分就是又他完成的;loader簡單來說就是一個匯出為函式的JavaScript模組,webpack會配置檔案申明的倒序呼叫loader,傳入資原始檔,經loader處理後傳給下一loader或者webpack處理
常用loader
1.sass-loader、less-loader、stylus-loader、style-loader、css-loader
2.babel-loader
3.file-loader、url-loader
4.vue-loader
5.string-loader
webpack之plugin
plugin是webpack的重要組成部分,他能以各種鉤子鉤入每個編譯(compilation)中觸發的所有關鍵事件,外掛都具備完全訪問compiler物件的能力
常用plugin
1.HtmlWebpackPlugin
2.HotModuleReplacementPlugin
3.DefinePlugin
4.DllPlugin、DllReferencePlugin
以下是詳細配置
{ mode: 'development', // production:生產,會壓縮程式碼;development:開發,不會壓縮程式碼,便於debug devtool: 'inline-source-map',// 新增source map;便於debug,但會嚴重影響效能,千萬不要在生產環境使用 // webpack打包的入口 entry: { app: './src/index.js', // 路徑相對於package.json // app: ['./vue.js', './src/index.js'] }, // 檔案輸出 output: { filename: '[name].js', path: path.resolve(__dirname, '../dist') // 輸出的目錄,預設為dist }, optimization: { runtimeChunk: true,// 將webpack打包後的主檔案單獨分離,預設是將主檔案放在入口檔案當中,當需要在入口檔案之前引入打包的公共程式碼時需要用到,此項建議對webpack有一定了解後再理解,關於打包後的程式碼分析我會單獨寫一篇 // 抽離公共程式碼 splitChunks: { cacheGroups: { vendor: { // 抽離第三方外掛 test: /node_modules/, // 指定是 node_modules 下的第三方包 chunks: 'initial', // initial 對於非同步匯入的檔案不處理;async 非同步chunk,只對非同步匯入的檔案處理;all 全部chunk name: 'common/vendor', // 打包後的檔名,任意命名,會逆優化首屏載入的速度,慎用,建議每個公共程式碼塊都單獨抽離或者手動配置 priority: 10 // 設定優先順序,防止和自定義的公共程式碼提取時被覆蓋,不進行打包 }, utils: { // 抽離自定義公共程式碼 test: /\.js$/, chunks: 'initial', name: true, // 每個頁面的包只包含需要的檔案,不會影響首屏載入的速度,good job minSize: 0 // 只要超出 0 位元組就生成一個新包,預設30000B } } } }, module: { rules: [ // 打包css檔案需要用到的loader // 注意:loader的執行順序是後面的先執行 //style-loader必須在css-loader的前面 { test: /\.css$/, use: [ // 將css檔案以style標籤形式插入 { loader: 'style-loader', options: { singleton: true // 設定為true,多個css檔案會在同一個style標籤內 } }, 'css-loader' ], include: path.resolve(__dirname, '../src') // 只處理對應目錄下的檔案,構建效能提升 }, { test: /\.js$/, use: [ 'babel-loader', // 配置babel轉換程式碼 ], exclude: path.resolve(__dirname, '../node_modules') } ] }, plugins: [ // 在每次打包前清理dist目錄 // 注意配置刪除dist目錄下的所有檔案,而不是dist目錄,因為當dist目錄其他程式開啟時將無法刪除 new CleanWebpackPlugin(['dist/*'], { root: path.resolve(__dirname, '../') }), // 用於處理入口html,如自動注入entry對應js,並拷貝至壓縮目錄等等 new HtmlWebpackPlugin({ template: './src/index.html', // 壓縮html minify: { removeComments: true, // 刪除註釋 collapseWhitespace: true, // 刪除空格 removeAttributeQuotes: true // 刪除屬性的引號 } }) ], // 配置後webpack會跳過對應模組的打包,當使用cdn時需要用到,此項能提升構建效能與前端效能 externals: { vue: 'vue' } }