1:webpack安装和命令行
npm init
npm install webpack --save-dev
webpack hello.js hello.bundle.js //hello.js 需要打包的文件名称 hello.bundle.js 打包完成之后的名称
//模块化引入js文件
require('./world.js');
//引入css-loader style-loader
npm install --save css-loader style-loader
//js文件中引入css文件需要这样引入css才能生效
require('style-loader!css-loader!./style.css');
webpack hello.js hello.bundle.js //自动监听文件改变
2: webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// entry: ['./src/script/main.js', './src/script/a.js'], //入口文件
entry: {
main: './src/script/main.js',
a: './src/script/a.js',
b: './src/script/b.js',
c: './src/script/c.js'
},
devServer: {
contentBase: './dist'
},
output: {
path: path.resolve(__dirname, 'dist'), //打包以后的文件路径
filename: 'js/[name].js', //打包以后的文件名称
publicPath: '/' //项目上线时添加的域名路径
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output management',
template: 'index.html',
filename:'a.html', // 设置生成文件的名称
inject: 'head', //指定生成的脚本 放置在head区域
chunks:['main','a'], // 生成的html文件只引入main a 文件
minify: {
removeComments: true, // 去除注释
collapseWhitespace: true //去除空格 更多参数看官方配置
}
}),
new HtmlWebpackPlugin({
title: 'Output management',
template: 'index.html',
filename:'b.html', // 设置生成文件的名称
inject: 'head', //指定生成的脚本 放置在head区域
excludeChunks:['a','c'], //除了这里的文件其他的都引入
minify: {
removeComments: true, // 去除注释
collapseWhitespace: true //去除空格 更多参数看官方配置
}
}),
new HtmlWebpackPlugin({
title: 'Output management',
template: 'index.html',
filename:'c.html', // 设置生成文件的名称
inject: 'head', //指定生成的脚本 放置在head区域
chunks:['c'],
minify: {
removeComments: true, // 去除注释
collapseWhitespace: true //去除空格 更多参数看官方配置
}
}),
new HtmlWebpackPlugin({
template: 'about.html',
filename: 'about.html'
}),
]
}