const CleanWebpackPlugin = require('clean-webpack-plugin');//引入 plugins: [// 对应的插件 new HtmlWebpackPlugin({ //配置 filename: 'index.html',//输出文件名 template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件 }), new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录 ]
执行webpack --mode development,可以看到dist目录被删除,又生成一个新的dist,之前的js文件已经被删除。
提取公共文件
我们可看到a.js和index.js都引入了c.js文件,为什么要提取公共代码,简单来说,就是减少代码冗余,提高加载速度。和之前的webpack配置不一样:
//之前配置 // new webpack.optimize.SplitChunksPlugin({ // name: 'common', // 如果还要提取公共代码,在新建一个实例 // minChunks: 2, //重复两次之后就提取出来 // chunks: ['index', 'a'] // 指定提取范围 // }), //现在配置 optimization: { splitChunks: { cacheGroups: { commons: { // 抽离自己写的公共代码 chunks: "initial", name: "common", // 打包后的文件名,任意命名 minChunks: 2,//最小引用2次 minSize: 0 // 只要超出0字节就生成一个新包 }, vendor: { // 抽离第三方插件 test: /node_modules/, // 指定是node_modules下的第三方包 chunks: 'initial', name: 'vendor', // 打包后的文件名,任意命名 // 设置优先级,防止和自定义的公共代码提取时被覆盖,不进行打包 priority: 10 }, } } },
下载jq npm install jquery --save 在a.js,index.js引用 import $ from 'jquery' 输出$
生成3个js文件,执行webpack --mode development
热更新,自动刷新
我们将用到webpack-dev-serve,webpack-dev-server就是一个基于Node.js和webpack的一个小型服务器,它有强大的自动刷新和热替换功能。
安装webpack-dev-serve
npm install webpack-dev-serve --save-dev
配置webpack.config.js文件
const webpack = require("webpack"); plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './index.html', }), new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录 // 热更新,热更新不是刷新 new webpack.HotModuleReplacementPlugin() ], devServer: {//配置此静态文件服务器,可以用来预览打包后项目 inline:true,//打包后加入一个websocket客户端 hot:true,//热加载 contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录 host: 'localhost',//主机地址 port: 9090,//端口号 compress: true//开发服务器是否启动gzip等压缩 },
配置package.json
"scripts": { "dev": "webpack-dev-server --mode development" },
执行npm run dev 访问 :9090/
随便修改任一文件便会自动刷新网站显示修改相应内容。
总结:
webpack4还有很多很多配置,例如css的拆分呀,less sass配置呀,js编译es6呀,多入口配置呀,生产环境配置,js没有使用的模块自动检测剥离等等,只能等下次有空在总结,感谢大家的观看,新手入坑,欢迎指出错误的地方。