起初为什么会想要学习 webpack 打包原理,只是因为好奇心发作,由于在工作中,我有处理过项目的首屏加载速度优化的过程,虽然但是是解决了加载问题,也对那些 loader 甚是一脸懵逼,于是上周五下定决心要研究一下 webpack 原理,研究了 vue 几个常见的 组件,创建了一个 kui 组件库
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
return path.resolve(__dirname, o)
}
module.exports = {
entry: resolve('src/app.js'), // 指定入口文件
output: {
path: resolve('dist'),
// filename: '[name]-[hash].js'
filename: "js/[name].bundle.js",
// publicPath: ''
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: resolve('node_modules'), //指定排除的范围,
include: resolve('src')
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
plugins: [
new htmlWebpackPlugin({
// filename: "index-[hash].html",
// filename: 'index-[chunkhash].html',
filename: "index.html", // 生成 dist/a.html
template: 'index.html', // 指定根目录下的 index.html
inject: 'body',
})
]
}