有一句話叫“前人栽樹后人乘涼”，還有一句話叫“如果說我看得比別人更遠些，那是因為我站在巨人的肩膀上”。前一句是國人的俗語，后一句是那個發現了“萬有引力”定律的牛頓說的。為什么要引用這兩句呢？是因為我剛開始用vue的時候，使用的是vue-cli來搭建vue項目，快速又好用；我剛開始用react的時候，使用的是create-react-app來搭建react項目，方便又省事。使用這些已有的腳手架來搭建項目，無可厚非，對于新手來說，也確實能快速構建，不做置評。

既然已經有了這些現成的腳手架了，為什么我們還熱衷于自己來配置webpack來搭建構建項目呢？因為我們只有了解并學會了配置webpack，我們才能更好地在打包構建項目時將webpack的性能發揮到極致，才能根據自身項目的實際需求，配置有利于項目開發的各種工具、插件，提高我們的開發效率。比如我們在打包項目時，可以分析哪些地方降低了webpack的打包速度，別人打包速度需要花去十多秒、二十多秒，而你能將打包的速度提升至幾秒，這就是你的優勢。當然，涉及到webpack的運行原理以及開發自己的loader或plugin就可以自行去學習了哈，本文只帶你配置一個webpack來搭建一個vue項目。

wepack作為一個“模塊打包機”其實是依賴了龐大的插件體系，插件體系是webpack的核心，可以說，webpack的生態就是建立在眾多插件之上的，而開發環境和生產打包環境依賴的插件還是有所不同的，先以開發環境為例

webpack.config.js：

const path = require('path');const Webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require("mini-css-extract-plugin");const VueLoaderPlugin = require('vue-loader/lib/plugin');const ProgressBarPlugin = require('progress-bar-webpack-plugin');const resolve = (dir) => { return path.join(__dirname, '..', dir)}const assetsPath = (_path) => { return path.join('static', _path)}const isEnvProduction = process.env.NODE_ENV == "production", port = 3003;module.exports = { mode: 'development', devtool: 'source-map', entry: resolve('src'), output: {  path: resolve('dist'),  filename: isEnvProduction ? assetsPath('js/[name]-[hash].js') : '[name]-[hash].js',  chunkFilename: isEnvProduction ? assetsPath('js/[name]-[chunkhash:5].min.js') : '[name]-[chunkhash:5].min.js',  publicPath: '/', }, resolve: {  extensions: ['*', '.js', '.vue'], //webpack2.x extensions[0]不能為空 resolve屬性中的extensions數組中用于配置程序可以自行補全哪些文件后綴  alias: {   '@': resolve('src'),   // 'vue$': 'vue/dist/vue.esm.js'  }, }, //提取公共代碼 optimization: {  splitChunks: {   cacheGroups: {    commons: {     test: /[///]node_modules[///]/, //表示默認拆分node_modules中的模塊     name: "vendor", //提取出來的文件命名     chunks: "all",  //提取所有文件的公共部分     minChunks: 2,   //表示提取公共部分最少的文件數 模塊被引用>=2次，拆分至vendors公共模塊     minSize: 0,   //表示提取公共部分最小的大小 模塊超過0k自動被抽離成公共模塊    },   }  } }, module: {  rules: [   {    test: //.vue$/,    use: ['vue-loader'],    exclude: /node_modules/,   },   {    test: //.js$/,    loader: 'babel-loader',    exclude: /node_modules/,    query: {     "presets": ["@babel/env"],     "plugins":      ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-runtime"],    }   },   {    test: //.(sa|sc|c)ss$/,    use: [     MiniCssExtractPlugin.loader,     'css-loader',     'postcss-loader',     'sass-loader',    ],   },   {    test: //.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,    use: 'file-loader?name=' + (isEnvProduction ? assetsPath('fonts/[name].[hash:8].[ext]') : 'fonts/[name].[hash:8].[ext]')   },   {    test: //.(jpg|jpeg|png|gif|ico|svg)$/,    loader: 'url-loader',    options: {     limit: 10000,     name: isEnvProduction ? assetsPath('images/[name].[hash:8].[ext]') : 'images/[name].[hash:8].[ext]',    }   },  ], }, plugins: [  new ProgressBarPlugin(),  new VueLoaderPlugin(),  //ProvidePlugin是webpack的內置模塊，使用ProvidePlugin加載的模塊在使用時將不再需要import和require進行引入  new Webpack.ProvidePlugin({   _: 'lodash',  }),  new HtmlWebpackPlugin({   template: './src/index.html', //文件路徑及名稱   filename: 'index.html',   //輸出后的文件名稱  }),  new MiniCssExtractPlugin({   filename: isEnvProduction ? assetsPath("css/[name]-[hash].css") : "css/[name]-[hash].css",   chunkFilename: isEnvProduction ? assetsPath("css/[name]-[hash].css") : "css/[name]-[hash].css", //默認就是取的以id或name為開頭的css，所以可以加這行配置代碼，也可以不加  }), ], devServer: {  port,  host: '0.0.0.0',  open: `http://localhost:${port}`,  stats: {   hash: false,   builtAt: false,   version: false,   modules: false,   children: false, ////解決類似Entrypoint undefined = index.html和Entrypoint mini-css-extract-plugin = *的警告   entrypoints: false,   colors: {    green: '/u001b[32m',    yellow: '/u001b[32m',   }  },  proxy: {   '/': {    target: '',    changeOrigin: true   }  },  inline: true,  compress: false,  disableHostCheck: true,  historyApiFallback: true, },}