这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
使用webpack打包css文件
- 运行
cnpm i style-loader css-loader --save-dev - 修改
webpack.config.js这个配置文件：
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
]
}
- 注意：
use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；
使用webpack打包less文件
- 运行
cnpm i less-loader less -D - 修改
webpack.config.js这个配置文件：
{ test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
使用webpack打包sass文件
- 运行
cnpm i sass-loader node-sass --save-dev - 在
webpack.config.js中添加处理sass文件的loader模块：
{ test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
使用webpack处理css中的路径
- 运行
cnpm i url-loader file-loader --save-dev - 在
webpack.config.js中添加处理url路径的loader模块：
{ test: /.(png|jpg|gif)$/, use: 'url-loader' }
- 可以通过
limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：
{ test: /.(png|jpg|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]' },
limit ：指定大小
hash:添加hash值，防止重名
name:原名显示
ext:原后缀
加载字体：
{test:/.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}
使用babel处理高级JS语法
老版本babel
- 运行
cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包 - 运行
cnpm i babel-preset-es2015/env babel-preset-stage-0 --save-dev安装babel转换的语法 - 在
webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：
{ test: /.js$/, use: 'babel-loader', exclude: /node_modules/ }
exclude:排除
- 在项目根目录中添加
.babelrc文件，并修改这个配置文件如下：
json格式文件：
{
"presets":["es2015/env", "stage-0"],
"plugins":["transform-runtime"]
}
- 注意：语法插件
babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；
新版本babel
安装最新babel依赖
babel 8.x
//.babelrc
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
打包到单独的文件夹中
js
output: {
//在输出文件名之前添加文件路径，如下
filename: 'js/webpack02.[name].js',
path: path.resolve(__dirname, 'dist')
},
img:
{
test: /.(png|jpg|gif)$/,
//outputPath:指定输出路径
use: 'url-loader?limit=182777&outputPath=images&name=[hash:8]-[name].[ext]'
},
css
MiniCssExtractPlugin :地址 https://www.npmjs.com/package/mini-css-extract-plugin
使用：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
})
],
rules: [{
test: /.css$/,
// use: ['style-loader', 'css-loader']
// use: [MiniCssExtractPlugin.loader, "css-loader"]
use: [{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
}, "css-loader"]
}]
