const webpackConfig = require('./webpack.base.conf'); const merge = require('webpack-merge'); const webpack = require('webpack'); //抽离CSS样式 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = merge(webpackConfig,{ mode: 'production', devtool: 'cheap-source-map', module: { rules: [ { test: /\.(c|le)ss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap: true, plugins: loader=>[ require('autoprefixer')({ browsers: [ "last 2 versions", "> 1%" ] }) ] } }, { loader: 'less-loader' } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name]-[hash:5].css', chunkFilename: 'css/[id]-[hash:5].css', }), ], }
清理打包创建文件夹
打包过程中你会发现每次打包后dist文件夹都会不断增加文件, 显然这个方面我们需要处理
安装相关依赖
npm i clean-webpack-plugin --save-dev
//清理dist const CleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin(), ],
压缩js和css代码
压缩css代码
npm i optimize-css-assets-webpack-plugin --save-dev
压缩js代码
npm i terser-webpack-plugin --save-dev
使用方式
optimization: { minimizer: [ //压缩css new OptimizeCssAssetsWebpackPlugin({}), // 压缩JS new TerserWebpackPlugin({ cache: true, parallel: true, sourceMap: true, }), //具体更多配置可以查看官网 ] }
在命令行上运行 npm run build 可以运行开发环境配置文件
好了，说完开发环境的配置，接下来到生产环境的配置了
五、开发环境配置
在 webpack.dev.conf.js 文件里面进行配置
有点小累（捂脸）
定义环境变量
跟生产环境一样，首先也是要定义环境变量
new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('development') } }),
处理css和less文件
开发环境下的css和less不需要提取样式，只需要添加前缀和sourceMap方便调试
安装依赖
处理css和less文件
npm i style-loader css-loader less less-loader --save-dev
自动添加前缀
npm i postcss-loader autoprefixer --save-dev
const webpackConfig = require('./webpack.base.conf.js'); const merge = require('webpack-merge'); const path = require('path'); const webpack = require('webpack'); module.exports = merge(webpackConfig,{ mode: 'development', // source-map,将编译后的代码映射到原代码，便于报错后定位错误 devtool: 'inline-source-map', module: { rules: [ { test: /\.(c|le)ss$/, use: [ { loader: 'style-loader', options: { sourceMap: true } }, { loader: 'css-loader', options: { sourceMap: true, } }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap: true, plugins: loader=>[ require('autoprefixer')({ browsers: [ "last 2 versions", "> 1%" ] }) ] } }, { loader: 'less-loader', options: { sourceMap: true } } ] } ] }, }
配置devServer
webpack上可以开启热更新模式，大大加速开大效率。
安装相关依赖
npm i webpack-dev-server --save-dev
上代码
//具体更多配置可以参考官网 devServer: { contentBase: path.resolve(__dirname,'../dist'), // hot: true, port: 9090, overlay: { warnings: true, errors: true }, publicPath: 'https://www.jb51.net/' } plugins: [ // 启用模块热替换(HMR) new webpack.HotModuleReplacementPlugin(), // 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境。 new webpack.NamedModulesPlugin(), ],
这样子就可以在线调试，无需手动刷新了！！嘻嘻
好了，开发环境的配置也完成了
在命令行上输入 npm run dev 可以运行生产环境配置文件
六、总结
整个Vue开发环境配置下来，感觉学到的东西还是挺多的，对webpack4功能的配置也有了大致的认识
虽然跟Vue-cli相比还是差太远，但是有时候弄点小东西折腾一下感觉还是不错的！！
好了，本编文章就到此为止，由于本人水平有限，如果有什么错误，请及时指出，彼此好好进步，哈哈！！谢谢各位大佬（笑脸）
下篇文章我将用这次搭建的Vue开发环境去编写 todoList 项目
我相信大家对todoList并不陌生，但是同一个项目可以有不同的写法的，所以下篇文章我也会继续手动搭建Vue文件夹，纯手写，用 vue-router . vuex 来实现，相信会对大家有帮助，好了，结束！！
github源码：https://github.com/Zero-jian/webpack
下篇文章 手动搭建Vue项目 ，未完待续~~~