编译es6
babel转化语法依赖:
babel-loader:负责ES6语法转化
babel-core:babel核心包
babel-preset-env:告诉babel使用哪种转码规则进行文件处理
(1)安装依赖
npm install babel-loader @babel/core @babel/preset-env --save-dev
(2)配置config
exclude表示不在指定目录查找文件
{
test:/\.js$/,
exclude:/node_modules/,
use:'babel-loader'
}
(3)新建.babelrc文件配置转化规则
{
"presets":["@babel/preset-env"]
}
另一种配置方式,不使用.babelrc文件
{
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:["@babel/preset-env"]
}
}
}
生成HTML
1.了解html-webpack-plugin
根据src下的index.html自动在打包后的目录下生成html文件,相关引用关系和文件路径会按照正确的配置被添加进生成的html文件。
2.安装依赖
npm install html-webpack-plugin --save-dev
3.配置config文件
const HtmlWebpackPlugin=require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html', //模板文件路径
filename:'webpck.html', //生成文件路径
// minify:{
// minimize:true, //是否打包为最小值
// removeAttributeQuotes:true, //去除引号
// removeComments:true, //去除注释
// collapseWhitespace:true, //去除空格
// minifyCSS:true, //压缩html内的样式
// minifyJS:true, //压缩html内的js
// removeEmptyElements:true, //清理内容为空的元素
// },
// hash:true //引入产出资源时加上哈希避免缓存
})
]
处理HTML内嵌图片
在HTML中引入图片: html-withimg-loader
(1)安装
npm install html-withimg-loader --save
(2)配置config文件
Rules设置:
{
test:/\.(html|htm)$/,
use:['html-withimg-loader']
}