最近在學習webpack，邊學邊練習，下面是對一些應用到的屬性、插件記錄分享出來，也方便以后查找與復習，過程中碰到了一些坑，在注釋中有說明：

const path = require('path')
const webpack = require("webpack")const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');function parseUrl(dir) {let mark = '\\'.indexOf(dir) !== -1 ? '\\' : '\/';return dir.split(mark).slice(0, -1).join(mark);
}
/*** 說明* * 1、可以通過import(\/* webpackChunkName: "lodash_file" *\/ 'lodash').then()這種方式動態添加Chunk，*      打包以后會獨立成一個文件，注釋部分結合output- chunkFilename 命名打包后的文件名* 2、chunk名稱，可以通過entry進行定義，也有一些默認的chunk包*/
module.exports = {entry: {  // 命名chunk，后面可以通過屬性名調用到app: './app/index.js',check: './src/check.js',repeat: './src/repeat.js',vender: ['colors','lodash']},};

output

output: {// 文件用hash打包的時候([name].[chunkhash].js)，需要關閉熱替換，生產環境是不需要熱替換的// filename: '[name].bundle.js',filename: '[name].[chunkhash].js',path: path.resolve(parseUrl(__dirname), 'dist'),publicPath: '/',  // webpack-dev-middleware插件用到的公共路徑，在server.js文件中會用到chunkFilename: '[name].bundle.js',  // 可以控制動態加載文件名稱
},

devtool

/*** devtool * * 追蹤錯誤和警告，打包以后，使用打包文件也可以追蹤到哪個文件出錯，可以有多個選項，* 參見：https://segmentfault.com/a/1190000004280859 或 https://doc.webpack-china.org/configuration/devtool （官網）* * 開發環境推薦使用 cheap-module-eval-source-map* 理由：* 1、不生成列信息，可以大幅提高 souremap 生成的效率，如果需要列信息，有些瀏覽器也可以自動生成列信息* 2、使用 eval 方式可大幅提高持續構建效率，參見 https://doc.webpack-china.org/configuration/devtool 效率對照表* * 生產環境使用 source-map*/
devtool: 'cheap-module-eval-source-map',

watch

// 監聽項目是否有改動，如果有改動直接影響修改
watch: true,
watchOptions: {// 重新構建一次的延遲時間，在這段時間內有其他變動，會收集起來一起構建aggregateTimeout: 300,poll: 1000,  // 每秒檢查一次變動ignored: /node_modules/  // 忽略node_modules文件夾中的文件變動，提升性能
},

devserver

//  構建一個web服務器
devServer: {contentBase: '../dist',  // 指定服務響應目錄hot: true,  // 啟用熱替換模塊 需要在入口文件中進行配置監聽，詳細參考文檔https://doc.webpack-china.org/guides/hot-module-replacement/
},

module

module: {// 解析文件時匹配相對應的loaderrules: [{test: /\.css$/,use: ["style-loader", "css-loader"],use: ExtractTextPlugin.extract({  // 樣式獨立打包use: 'css-loader'})},{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']}]
},

plugins

plugins: [// 分離css依賴，生成獨立樣式包，放入參數文件中（沒有會自動生成）new ExtractTextPlugin('styles.css'),// 生成html模板，調用了webpack生成的所有包new HtmlWebpackPlugin({title: 'Output Management',filename: 'index.html',// chunksSortMode: 'none',  // 模塊排列順序// chunks: ['app'],  // 渲染模板，輸入入口定義的模板名稱excludeChunks: ['check'], // 排除的渲染模板，以輸入入口定義的模板名稱為準template: 'index.html'  // 模板路徑，在現有模板的基礎上將打包生成的chucks添加上去}),// 先清除文件夾后生成，避免不必要的文件存在，根目錄下的不能清除new CleanWebpackPlugin(['../dist']),// prints more readable module names in the browser console on HMR updatesnew webpack.NamedModulesPlugin(),/*** 熱替換* * 需要在devServer屬性配置 hot:true 并且創建組件 啟動熱替換* 通過 module.hot 屬性，用來接收監聽接口 放到入口文件中* 使用熱替換可以實現局部刷新，節省開發時間* 如果沒有引入熱替換，修改后就會全部刷新，影響響應速度* HMR 修改樣式表時，需要在hot下引入接口，* 注意：使用熱替換監聽樣式修改時，不能啟動樣式表獨立打包模式，如果啟動瀏覽器就不能響應到樣式的修改* API鏈接：https://doc.webpack-china.org/api/hot-module-replacement*/new webpack.HotModuleReplacementPlugin(),// 代碼壓縮，可以配置source map模式// new UglifyJSPlugin({//     // 使用source map模式(devtool屬性必須設置為devtool: 'source-map')//     // 作用：在生產環境中也可以很方便的調試代碼，類似于devtool: 'inline-source-map'模式//     sourceMap: true// }),new webpack.DefinePlugin({// 定義環境變量，可以在打包入口文件中獲取到，相應環境變量'process.env': {'NODE_ENV': JSON.stringify('production')}}),// 將公共的依賴模塊提取到已有的入口 chunk 中 // 可以創建多個// 可以提取自帶 chunk 獨立打包，比如：boilerplate 、 manifest ....new webpack.optimize.CommonsChunkPlugin({name: 'common', // chunk 的名稱filename: 'common_file.js',  // 輸出 chunk 文件名/*** 公共 chunk 之前所需要包含的最少數量的 chunks（也就是有幾個chunk依賴）* * 1、可選擇 number|Infinity(馬上生成 公共chunk，但里面沒有模塊)|function(module, count) -> boolean,* 2、可以調用函數 返回true的文件打包成獨立文件，false 不會獨立成包* * @param module 模塊信息* @param count 調用數量*/minChunks: function (module, count) {// 禁止打包樣式相關文件（有組件針對樣式文件打包）if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {return false;}// node_modules文件夾中的文件獨立打包return module.context && module.context.indexOf("node_modules") !== -1;}}),// 可以根據 entry 或name名稱進行分離打包，// 如果和 chunk = 'common' 共用，會報錯new webpack.optimize.CommonsChunkPlugin({name: "vender",minChunks: Infinity}),// 避免hash發生變化// new webpack.HashedModuleIdsPlugin(),
]

如果有什么不對的地方，歡迎指正。