webpack4（二）:es6、图片处理、多入口打包
2020-10-29 本文已影响0人
姜治宇
处理es6（babel）
我们在index.js添加一个箭头函数：
let str = require('./a.js')
console.log(str)
require('./style.css')
let foo = ()=>{
console.log('es6箭头函数')
}
foo();
如果不做任何额外配置，打包出来仍旧是es6语法，如何翻译成兼容性好的es5呢？这就需要借助于babel。
先来安装一下。
cnpm i babel-loader @babel/core @babel/preset-env -D
然后在webpack配置文件使用它：
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css
let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css
let UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {
mode:'development',//模式设置为开发环境的话，不走优化项optimization
//mode: 'production',//模式，默认两种 production和development
entry: './src/index.js', //入口
output: {
filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
path: path.resolve(__dirname, 'build') // 必须是绝对路径
},
plugins: [ //配置插件
new HtmlWebpackPlugin({ // 处理html插件
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true, // 去掉引号
collapseWhitespace: true, // 去掉空格
},
hash: true //加hash防止引用文件缓存
}),
new MiniCssExtractPlugin({ // 抽离css插件
filename: 'main.css',
})
],
module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
rules: [
{ // es6语法解析
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env' //babel-loader的解析库
]
}
},
include:path.resolve(__dirname,'src'),
exclude:/node_modules/
},
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader', //loader可以传对象
// options: {
// insert: 'top' //将插入点调到最上面
// }
// },
MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
'css-loader',
'postcss-loader'
]
}
]
},
optimization:{ // 优化项，只在生产环境有效
minimizer:[
new UglifyJS({ //js压缩
cache:true,
sourceMap:true,
parallel:true
}),
new OptimizeCss() // css压缩
]
}
}
图片处理（file-loader、url-loader）
图片一般有三种引用途径：
1）js创建图片引入
2）css的background等引入
3）html的<img>标签引用
当这些文件被打包到目标目录时，我们希望图片也一起打包进来，这样可以保证路径不会错，这时需要file-loader帮我们来处理。
cnpm i file-loader -D
webpack配置文件：
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css
let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css
let UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {
mode:'development',//模式设置为开发环境的话，不走优化项optimization
//mode: 'production',//模式，默认两种 production和development
entry: './src/index.js', //入口
output: {
filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
path: path.resolve(__dirname, 'build') // 必须是绝对路径
},
plugins: [ //配置插件
new HtmlWebpackPlugin({ // 处理html插件
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true, // 去掉引号
collapseWhitespace: true, // 去掉空格
},
hash: true //加hash防止引用文件缓存
}),
new MiniCssExtractPlugin({ // 抽离css插件
filename: 'main.css',
})
],
module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
rules: [
{ //打包图片file-loader
test:/\.(png|jpg|gif)/,
use:'file-loader'
},
{ // es6语法解析
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env' //babel-loader的解析库
]
}
},
include:path.resolve(__dirname,'src'),
exclude:/node_modules/
},
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader', //loader可以传对象
// options: {
// insert: 'top' //将插入点调到最上面
// }
// },
MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
'css-loader',
'postcss-loader'
]
}
]
},
optimization:{ // 优化项，只在生产环境有效
minimizer:[
new UglifyJS({ //js压缩
cache:true,
sourceMap:true,
parallel:true
}),
new OptimizeCss() // css压缩
]
}
}
运行后，图片也一并被打包到build目录了。不过有些情况下，比如有些小图片我们减少请求数，直接使用base64的形式，这样就需借助url-loader了。
cnpm i url-loader -D
我们可以制定一个规则，比如小于多少k的时候就用url-loader转为base64，其他情况还是用file-loader进行图片输出。
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css
let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css
let UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {
mode:'development',//模式设置为开发环境的话，不走优化项optimization
//mode: 'production',//模式，默认两种 production和development
entry: './src/index.js', //入口
output: {
filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
path: path.resolve(__dirname, 'build') // 必须是绝对路径
},
plugins: [ //配置插件
new HtmlWebpackPlugin({ // 处理html插件
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true, // 去掉引号
collapseWhitespace: true, // 去掉空格
},
hash: true //加hash防止引用文件缓存
}),
new MiniCssExtractPlugin({ // 抽离css插件
filename: 'main.css',
})
],
module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
rules: [
{ //打包图片file-loader
test:/\.(png|jpg|gif)/,
use:{
loader:'url-loader',
options: {
limit:20*1024
}
}
},
{ // es6语法解析
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env' //babel-loader的解析库
]
}
},
include:path.resolve(__dirname,'src'),
exclude:/node_modules/
},
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader', //loader可以传对象
// options: {
// insert: 'top' //将插入点调到最上面
// }
// },
MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
'css-loader',
'postcss-loader'
]
}
]
},
optimization:{ // 优化项，只在生产环境有效
minimizer:[
new UglifyJS({ //js压缩
cache:true,
sourceMap:true,
parallel:true
}),
new OptimizeCss() // css压缩
]
}
}
url-loader和file-loader之间有引用关系，这里只需声明url-loader即可，大于20k时会自动调用file-loader。
多入口打包
有时我们可能会根据项目的业务打包成多个入口，比如用户中心模块（home.html）、其他模块（other.html）。
以两个入口为例，我们首先需要定义两个入口和出口，这里就要注意出口不能定死文件名了，我们可以使用[name]的方式来动态输出文件名；然后就是打包html文件，我们知道需要使用html-webpack-plugin插件来处理，这里就需要配置两个html-webpack-plugin对象，分别对应不同的打包输出。
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
module.exports = {
mode:'development',//模式设置为开发环境的话，不走优化项optimization
//mode: 'production',//模式，默认两种 production和development
entry: {
home:'./src/home.js', //入口1
other:'./src/other.js', //入口2
},
output: {
filename: '[name].[hash:8].js', //
path: path.resolve(__dirname, 'build') // 必须是绝对路径
},
plugins: [ //配置插件
new HtmlWebpackPlugin({ // 处理html插件
template: './src/index.html', //模板文件
filename: 'home.html',
chunks:['home'] //只引入home.js
}),
new HtmlWebpackPlugin({ // 处理html插件
template: './src/index.html', //模板文件
filename: 'other.html',
chunks:['other'] //只引入other.js
}),
],
}
