一、摘要

從最初的html css js 混合編程，到分離編程。再到用上各種框架 react vue angular ， 伴隨著框架和模塊化的概念鋪開，打包編譯工具漸漸浮出水面。從2013年開始使用打包編譯工具，其也經歷了多個更新換代，從最初的grunt -> gulp -> webpack , 還有一些自成體系的，例如 fis ， 還有一些比較小眾的 rollup , browserify 等。我這里主要分享的是基于 typescript + scss 的webpack3打包編譯。

二、webpack3配置

2.1 關鍵配置

entry

打包編譯入口，可以單入口也可以多入口

entry : 'xxx/index.tsx', // 單入口 entry : ['xxx/index.tsx', 'yyy/index.tsx'], // 多入口 entry : { // 多入口, 并指定編譯后的名字a: 'xxx/index.tsx',b: 'yyy/index.tsx', }, // 多入口

output

path 指定輸出路徑
filename 輸出的文件名字，可增加 hash 后綴
publicPath 指定了你在瀏覽器中用什么地址來引用你的靜態文件，它會包括你的圖片、腳本以及樣式加載的地址，一般用于線上發布以及CDN部署的時候使用。

{output: {path: path.resolve(__dirname, 'build'),filename: "[name].bundle.[hash:8].js",publicPath: "http://localhost:3000/build/"}, }

resolve

extensions 自動加上文件擴展名，在 import 時 可省略， 比如 import './a.tsx' 可簡寫成 import './a'
alias 設置別名，一些常用的庫設置別名，可以有效減少import的路徑。推薦一個 很好用的插件 alias-resolve-loader 可以把node_modules 依賴的alias 也一并替換。

resolve: {alias: {jquery: 'xxxx/xxxx/jqueryjs'} }

module

根據你項目使用的語言選擇解析loader ， 我這里有兩種文件 tsx scss ，就分別指定了兩種文件的解析loader

url-loader

超出 8192 大小的 img 用圖片形式，其他采用 base64 碼形式打包到js中調用

module: {loaders:[{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192&publicPath=./dist/'},] }

plugins

webpack 最強大的就是plugins 生態了，基本你想要的功能都能有現成 plugin 插件直接使用。我們一般常見的插件有

• webpack.optimize.CommonsChunkPlugin 抽離不常改變的公共組件， 線上環境使用
• webpack.optimize.UglifyJsPlugin 丑化 js ， 線上環境使用
• ExtractTextPlugin css js 拆分，webpack 默認是把css js 全部打包到一個文件，這樣通常會面臨加載一個龐大的bundle.js 文件，有這個插件就可以實現 css js 拆分，html 并行加載css js
• BundleAnalyzerPlugin 分析打包文件大小，可以進一步做文件抽離

devtool

可以把錯誤映射到真實代碼中，方便排查錯誤，生產環境不加

2.2 真實案例

真實項目中，一般線下調試和線上是兩個版本 webpack 配置

線下

線下就做最簡單的tsx scss 編譯，打包成一個大文件

const path = require('path'); // 導入路徑包 const webpack = require('webpack');let config = {context: __dirname,devtool: "source-map",entry: {assetManage: "./src/xxx/index.tsx",},output: {path: path.resolve(__dirname, 'build'),filename: "[name].bundle.js",publicPath: "http://localhost:3000/build/"},resolve: {extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]},// 使用loader模塊module: {loaders: [{test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"},{test: /\.tsx?$/, loader: ['react-hot-loader', "ts-loader"]}]},plugins: [], };module.exports = config;

線上

線上需要生成文件大小，盡量減少頁面加載時間

const path = require('path'); // 導入路徑包 const webpack = require('webpack');var ExtractTextPlugin = require('extract-text-webpack-plugin'); var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const CompressionPlugin = require("compression-webpack-plugin");let config = {context: __dirname,entry: {service: "./src/xxx/index.tsx",vendor: ['react', 'react-dom'],},output: {path: path.resolve(__dirname, 'build'),filename: "[name].bundle.js",publicPath: "http://localhost:3000/build/"},resolve: {extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]},module: {loaders: [{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: [{loader: "css-loader",options: {minimize: true}}, "sass-loader"]})},{test: /\.tsx?$/, loader: ['react-hot-loader', "ts-loader"]}]},plugins: [new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),new webpack.optimize.UglifyJsPlugin(),new ExtractTextPlugin({filename: 'css/[name].css',allChunks: true}),new BundleAnalyzerPlugin()], };module.exports = config;

三、優化手段

抽離公共組件 vendor ， 拆分基礎組件 與 業務邏輯代碼

拆分css至單獨文件并壓縮

去除 devtool

增加 BundleAnalyzerPlugin 分析

四、其他

webpack 的替代方案？

happypack

rollup

轉載于:https://www.cnblogs.com/huxiaoyun90/p/7685570.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的webpack 打包编译优化之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。