webpack 基础实战2
2022年9月13日webpack 中的文件监听
- 缺点需要手动刷新页面
1.启动webpack 命令时.带上–watch 参数
|
1 |
./node_modules/.bin/webpack --watch |
2.在配置 webpack.config.js中设置 watch: true
|
1 2 3 4 5 6 7 8 |
module.export = { watch: true, //默认false，也就是不开启 watchOptions: { //只有开启监听模式时，watchOptions才有意义 ignored: /node_modules/, //不监听的文件或者文件夹，支持正则匹配 aggregateTimeout: 300, //监听到变化发生后会等300ms再去执行，默认300ms poll: 1000 //判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次 } } |
webpack 热更新 webpack-dev-server
- 不刷新浏览器
- 不输出文件，而是放在内存中
- 使用 HotModuleReplacementPlugin插件
1.通过命令方式
|
1 |
./node_modules/.bin/webpack-dev-server --open --port 3000 --hot //使用命令的方式调用 webpack-dev-server |
- –open: 自动打开浏览器
- –port 3000: 指定打开时的端口号
- –hot: 热更新 给bundle.js文件打补丁，而不是重新生成bundle.js 还可以实现浏览器的无刷新重载（对js没有效果，对css有效果）
2.通过配置 webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 |
module.exports = { mode: 'development', //只有在开发环境下才可以 plugins: [ new webpack.HotModuleReplacementPlugin(), ], devServer: { contentBase: './dist', static: {directory:'./dist'}, hot: true } }; |
配置package.json
|
1 2 3 4 5 6 7 8 9 10 11 |
{ . . . "scripts": { "dev": "webpack-dev-server --config webpack.dev.js --open" }, . . . } |
运行 npm run dev
文件指纹 css js img
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
const MiniCssExtractPlugin = require('mini-css-extract-plugin') . . . output: { path: path.resolve(__dirname, "dist"), filename: '[name][chunkhash:8].js' //js指纹 }, module: { rules: [ . . . { test: /\.(png|svg|jpg|gif)$/, use: [{ loader: 'file-loader', options: { name: 'img/[name][hash:8].[ext]' //文件指纹 } }] } ] }, plugins: [ new MiniCssExtractPlugin({ filename:`[name][contenthash:8].css` //css指纹 }), . . . |
文件压缩
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
. . . plugins: [ . . . //压缩css js默认压缩 new CssMinimizerPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}), //压缩html new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/search.html'), //源文件路径 filename: 'search.html', //处理后文件名称 chunks: ['search'], //使用那些模块 inject: true, //注入打开 minify: { //压缩 html5: true, //缩小h5标签 collapseWhitespace: true, //折叠空格 preserveLineBreaks: false, //保留换行 minifyCSS: true, //缩小css minifyJS: true, //缩小js removeComments: false //是否删除注释 } }) ], |
自动清理构建目录
|
1 2 3 4 5 6 7 8 9 10 11 |
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { . . . plugins: [ new CleanWebpackPlugin(), . . . |
PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀 CSS px 自动转换成 rem
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
module: { rules: [ { test: /.less$/, use: [ "style-loader", "css-loader", //加浏览器前戳 { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ "autoprefixer", { browsers: ["last 2 version", "> 1%", "IOS 7"] }, ] ] } } }, //转换为rem { loader: 'px2rem-loader', options: { remUni: 75, remPrecision: 8 } }, "less-loader", ] }, |
