編譯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']
}