基础配置--资源解析
1.解析es6
- babel-loader 解析es6语法
- @babel/core babel-loader依赖
- @babel/preset-env babel-loader调用@babel/preset-env核心模块对es6进行处理为es5
- @babel/plugin-proposal-decorators @babel/preset-env下的子模块,打包解析es7为es5
- @babel/plugin-proposal-class-properties 解析ES7中@修饰器
- @babel/plugin-transform-runtime 解析ES6异步函数generator函数 测试:只会对index.js进行解析
也可以配合 Happypack插件 进行多线程打包
let Happypack = require(‘Happypack‘); new Happypack({ //多线程打包 id:‘js‘, use:[{ loader:"babel-loader", options:{ presets: [ ‘@babel/preset-env‘, //babel-loader调用@babel/preset-env核心模块对es6进行处理为es5, ], //注意代码上下顺序 plugins: [ [‘@babel/plugin-proposal-decorators‘, { "legacy": true }], // @babel/preset-env下的子模块,打包解析es7为es5 [‘@babel/plugin-proposal-class-properties‘, { "loose": true }], // 解析ES7中@修饰器 ‘@babel/plugin-transform-runtime‘, //解析ES6异步函数generator函数 测试:只会对index.js进行解析 ‘@babel/plugin-syntax-dynamic-import‘ ] } }] } ),
2.解析css
- 插件mini-css-extract-plugin 分离css为单独文件
- style-loader
- css-loader
- postcss-loader 添加前缀
- px2rem-loader 转换rem单位
{ test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, //将解析的css抽离为main.css文件 options:{ publicPath: ‘../‘ //这个option必须写,否则css中图片路径可能会出错 }, }, ‘css-loader‘, //必须在‘css-loader‘下面,添加css前缀,配置同级目录下的postcss.config.js文件,进行配置 ‘postcss-loader‘, // { // loader:‘px2rem-loader‘, // options:{ // remUnit:50, //多少px 为 1rem // remPrecision:8 //精确到多少为小数点后位 // } // } ] },
3.解析less
- css-loader
- less-loader
-
{
test: /\.less$/, //解析less
use: [
MiniCssExtractPlugin.loader, //将解析的css抽离为main.css文件
‘css-loader‘,
‘postcss-loader‘, //必须在‘css-loader‘下面
‘less-loader‘,
]
},
4.解析图片
- url-loader 注意:url-loader基于file-loader
5.解析字体
- url-loader
6.解析html
- html-withimg-loader
- html-loader
-
{ test: /\.(htm|html)$/, //打包html中的img src loader: ‘html-withimg-loader‘ },
样式解析
css前缀补齐
- postcss-loader 必须在‘css-loader‘下面,添加css前缀,配置同级目录下的postcss.config.js文件,进行配置
postcss.config.js 文件
//postcss.config.js: module.exports = { plugins:[require(‘autoprefixer‘)], //配置插件 给css加前缀 }
px转rem
- px2rem-loader
options:{ remUnit:50, //多少px 为 1rem remPrecision:8 //精确到多少为小数点后位 }