webpack学习

中文文档：https://webpack.docschina.org/

##webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
util: ['./src/js/lib/common.js','./src/js/lib/mdd5.js'],//webpack会将common.js mdd5.js打包成util.js
index: './src/js/index.js',//webpack会将index.js打包成index.js
main: './src/js/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',//根据entry key动态文件名
},
plugins: [
new HtmlWebpackPlugin(
{
template: './src/index.html',
filename:'index.html',
chunks:['index','util'],//将index.js util.js自动加入index.html
minify:{
collapseWhitespace:true,
removeComments:true
}
}
),
new HtmlWebpackPlugin(
{
template: './src/main.html',
filename:'main.html',
chunks:['main','util'],
minify:{
collapseWhitespace:true,
removeComments:true
}
}
),
],
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' },
],
},
};