有一句话叫“前人栽树后人乘凉”，还有一句话叫“如果说我看得比别人更远些，那是因为我站在巨人的肩膀上”。前一句是国人的俗语，后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢？是因为我刚开始用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: 'http://www.likecs.com/', }, 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: `:${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: { 'http://www.likecs.com/': { target: '', changeOrigin: true } }, inline: true, compress: false, disableHostCheck: true, historyApiFallback: true, }, }