webpack學習筆記- 深入學習

05-25

webpack學習筆記- 深入學習

來自專欄前端組隊小夥伴

webpack.config.js 配置及項目打包編譯

//創建webpack.config.jsvar webpack = require(webpack);module.exports = { entry:./entry.js, //入口文件 output: { path: path.join(__dirname, dist), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它.名字可以隨便起 publicPath: ../, //模板、樣式、腳本、圖片等資源對應的server上的路徑 filename: js/[name].bundle.js, //每個頁面對應的主js的生成配置。比如我的app.js打包後就為 js/app.bundle.js chunkFilename: js/[id].bundle.js //dundle生成的配置 }, module: { loaders: [ //載入器，關於各個載入器的參數配置。 { test: /.vue$/, loader: vue-loader, options: vueLoaderConfig }, { test: /.js$/, loader: babel-loader, include: [resolve(src), resolve(test)] }, { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: url-loader, options: { limit: 10000, name: utils.assetsPath(img/[name].[hash:7].[ext]) } }, { //文件載入器，處理文件靜態資源 test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: url-loader, options: { limit: 10000, name: utils.assetsPath(fonts/[name].[hash:7].[ext]) }]}, plugins: [ new webpack.ProvidePlugin({ //載入jq $: jquery, _:underscore //載入underscore }), new webpack.optimize.CommonsChunkPlugin({ name: vendors, // 將公共模塊提取，生成名為`vendors`bundle chunks: [vendor], //提取哪些模塊共有的部分,名字為上面的vendor minChunks: Infinity // 提取至少*個模塊共有的部分 }), new ExtractTextPlugin(css/[name].css), //單獨使用link標籤載入css並設置路徑，相對於output配置中的 publickPath new webpack.HotModuleReplacementPlugin() //熱載入 ], };

webpack命令的幾種基本命令

webpack 最基本的啟動webpack方法，執行一次編譯 for building once for development

webpack -w 或 --watch增量編譯，監聽變動並進行自動實時打包更新 for continuous incremental build in development (fast!)

webpack -p壓縮混淆腳本，對打包後的文件進行壓縮，for building once for production (minification)

webpack -d生成 SourceMaps映射文件，告知哪些模塊被最終打包到哪裡，方便調試。 to include source maps

webpack --display-error-details查看查找過程，方便出錯時能查閱更詳盡的信息

webpack --config XXX.js 使用另一份配置文件來打包

webpack --colors 輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟

webpack --profile 輸出性能數據，可以看到每一步的耗時

webpack --display-modules 默認情況下node_modules下的模塊會被隱藏，加上這個參數可以顯示這些被隱藏的模塊

作者：大青吶

鏈接：https://www.jianshu.com/p/98201a4c1fd5

來源：簡書

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。