1. entry
entrt是webpack的打包入口
- 单页面入口
entry: './src/pages/index`
- 多页面入口
glob.sync('./src/pages/**/app.js').forEach(path => {
const chunk = path.split('./src/pages/')[1].split('/app.js')[0]
pages[chunk] = {
entry: path,
template: 'public/index.html',
title: titles[chunk],
chunks: ['chunk-vendors', 'chunk-common', chunk]
}
})
在output里面添加htmlWebpackPlugins
const entry = {};
const htmlWebpackPlugins = [];
const entryFiles = glob.sync(path.join(__dirname, './src/pages/*/app.js')); //获取路径里面的入口文件
Object.keys(entryFiles)
.map((index) => {
const entryFile = entryFiles[index];
const match = entryFile.match(/src\/(.*)\/index\.js/);
const pageName = match && match[1];
entry[pageName] = entryFile;
htmlWebpackPlugins.push(
new HtmlWebpackPlugin({
template: path.join(__dirname, `src/pages/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [pageName],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
);
});
return {
entry,
htmlWebpackPlugins
}
2. ouotput
用来描述输入文件目录
output: {
path: path.join(__dirname, 'dist'), // 输入文件路径
filename: '[name].js' // 输出文件名称
},
3. loader
loader一般处理的是项目里面的静态资源,多个loader的情况下是从右向左执行的
rules: [
{
test: /.js$/,
use: 'babel-loader' // 处理es6的语法
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader', // 自动补全css前缀
options: {
plugins: () => [
require('autoprefixer')({
browsers: ['last 2 version', '>1%', 'ios 7']
})
]
}
},
{
loader: 'px2rem-loader', // px自动转换成rem
options: {
remUnit: 75,
remPrecision: 8
}
}
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240
}
}
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader'
}
]
4. plugins
插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
5. modle
通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化
6.热跟新和文件指纹
点击跳转热跟新和文件指纹