js处理
为提高我们代码的兼容性,我们会将ES6语法转成ES5打包;处理js就或用到babel-loader
首先安装一下babel
npm i babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env -D 把ES6 转换成 ES5
npm i @babel/plugin-transform-runtime -D 对于一些实例上的内置api方法 一些无法转换ES5,那么就需要安装这个插件
npm install @babel/runtime @babel/polyfill -S 作为补丁就需要用在生产环境了, 使用babel/polyfill 需要在js文件用引入
npm i @babel/plugin-proposal-class-properties -D 当模块中使用到class类时,使用此插件来编译类
npm i @babel/plugin-proposal-decorators -D 编译装饰器
module:{ // webpack 中模块
rules:[ // 配置各种loader
{
test: /\.js$/, // 匹配js文件
use: { // 使用那些loader 遵从右到左(一行内) 从下到上(多行), 使用时注意loader的顺序
loader: 'babel-loader',
options: { // loader 的配置项; 使用插件等
presets: ['@babel/preset-env'],
plugins: [
["@babel/plugin-proposal-decorators", { // 使用装饰器插件
"legacy": true
}],
["@babel/plugin-proposal-class-properties", { // class 插件
"loose": true
}],
"@babel/plugin-transform-runtime",
]
}
},
// include: '', // 匹配此路径中的js文件
exclude: '/node_module/' // 排除node_module中的js文件
}
]
}
另外:使用vsCode编辑器,当使用到装饰器时,可能会出现报错,可以在vsCode设置中搜索 experimentalDecorators 设置javascript.implicitProjectConfig.experimentalDecorators为true。
css处理
// 将css分离处理形成单独的css文件的插件
const miniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [// 数组; 放着所有的插件
new miniCssExtractPlugin({ //
filename: 'main.css'
})
],
// 模块
module: {
rules: [
// 对各种 loader配置
{ // 样式配置
test: /\.css$/, // 需要配置的文件; 通常用正则表达式匹配
use: [ // 使用那些loader 遵从右到左(一行内) 从下到上(多行)
// 'style-loader', // 创建style标签将js中的样式资源插入到head标签中
// {// 也可以使用对象的形式进行配置
// loader: 'style-loader',
// options: {
// insert: 'body'
// }
// },
miniCssExtractPlugin.loader,
'css-loader', // 将 css样式按照commonJs规则加载到js文件中 以字符串形式
]
},
{
test: /\.less$/,
use: [
miniCssExtractPlugin.loader,
'css-loader',
'less-loader',
]
},
]
}
有时需要考虑到css样式的兼容,会给css样式自动加上前缀,那么就会使用 postcss-loader, 需要注意的是,此loader需要在生成环境中使用
npm i postcss-loader autoprefixer -D // 自动给css加前缀
// loader 中配置
{
test: /\.less$/,
use: [
miniCssExtractPlugin.loader,
'css-loader',
'postcss-loader', // 在解析css前加前缀,要卸载css-loader之前
'less-loader',
]
},
postcss-loader 还需要单独的配置文件 postcss.config.js 用来配置postcss-loader
module.exports = {
plugins: [
require('autoprefixer')({/* 配置项
overrideBrowserslist:[ // 浏览器配置项
"defaults",
"Android 4.1",
"iOS 7.1",
"Chrome>31",
"ff>31",
"ie>=8",
"last 2 versions",
">0%"
]
*/})
]
}
需要配置浏览器的支持才能使自动加前缀生效,否则无法生效,除以上方法还可以在package.json中配置browserslist,browserslist与devDependencies同级
"browserslist": [
"defaults",
"not ie <= 8",
"last 2 versions",
"> 1%",
"iOS >= 7",
"Android >= 4.0"
]
一般在生产环境时,我们还要对css文件进行压缩,就需要配置优化项
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
module.exports = {
mode: "production", // 生产环境
optimization: { // 优化项配置
minimizer: [
new TerserJSPlugin({}), // OptimizeCSSAssetsPlugin 压缩css但会导致js不能压缩,因此需要下载js压缩插件
new OptimizeCSSAssetsPlugin({}) // 压缩css 注意要在生产环境下,
],
},
}
欢迎指正,一起讨论学习