webpack学习资料

Loaders

module: { rules: [ { test: /\.txt$/, use: "raw-loader" } ] }

test:匹配规则 user:用的loader名字

plugins 作用于bundle文件的优化，资源管理和环境变量注入，作用于整个构建过程 plugins:[],放入插件

mode 用来指定当前的构建环境：production，development，none 默认production

解析es6 npm i @babel/core @babel/preset-env babel-loader -D 创建.babelrc

{ "presets": ["@babel/preset-env", "@babel/preset-react"]//所有babel }

webpack

module: { rules: [ { test: /.js$/,//所有js文件 use: "babel-loader" } ] }

解析css css-loader:加载.css文件转化成commonjs对象 style-loader:将样式通过

{ test: /.css$/, use: ["style-loader", "css-loader"]//先style再css因为webpack是从右到左 }

less less-loader

{ test: /.css$/, use: ["style-loader", "css-loader"]//先style再css因为webpack是从右到左 }

图片字体资源 file-loader

{ test: /.(jpg|png|gif)$/, use: ["file-loader"] }, { test: /.(woff|eot)$/, use: ["file-loader"] }

url-loader 对于小资源自动进行base64处理

{ test: /.(jpg|png|gif)$/, use: [{ loader:"url-loader", options:{ limit:10240 } }] }

文件监听 启动时加上 --watch 在配置文件中加入watch:true webpack 轮询判断文件的最后编辑时间是否变化，变化了会先缓存，等待aggregateTimeout后将所有改变的文件一起变化

watchOptions: { ignored: /node_modeles/, //不监听的文件 aggregateTimeout: 300, //缓存等待时间 poll: 1000 //默认每秒询问1000次 },

需要手动刷新

热更新 webpack-dev-server 不舒心浏览器 不输出文件，只是放在内存 用HotModuleReplacementPlugin插件

plugins: [new webpack.HotModuleReplacementPlugin()], devServer: { contentBase: "./dist", //服务目录 hot: true }, "dev": "webpack-dev-server --open"

webpack-dev-middleware 将webpack输出文件传输给服务器，适用于灵活的定制场景

文件指纹 文件后缀，用来做版本管理 图片: https://uploader.shimo.im/f/pdTGuOTJrYIwAKiB.png 用MiniCssExtractPlugin插件把style-loader中的css提取出来

new MiniCssExtractPlugin({ filename: `[name][contenthash:8].css` }) { test: /.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] }, { test: /.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", "less- loader"] },

自动清理构建目录

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); new CleanWebpackPlugin()

css增强 autoprefixer自动补齐css3前缀

{ test: /.less$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "less-loader", { loader: "postcss-loader", options: { plugins: [new require("autoPrefixer")] } } ] },

css px自动转换成rem px2rem-loader 页面渲染时计算根元素font-size值 可以使用手淘的lib-flexible库

<script src="../node_modules/amfe-flexible/index.js"></script>

静态资源内联

js文件压缩

内置uglifyjs-webpack-plugin不需要配置 css OptimizeCssAssetsPlugin new OptimizeCssassetsWebpackPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require("cssnano") }), html html-webpack-plugin