mkdir test #创建test文件夹
cd test #进入test文件夹
npm init #初始化文件夹建立package.json配置文件
npm install webpack --save-dev #安装webpack到devDependencies依赖中
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch
这句话表示打包hello.js到hello.bundle.js 并再引用css前引用style-loader和css-loader库
--wath #表示实时监控版本更换
--progress #表示显示百分比读条
--display-modules #表示引用的所有模块显示出来
--display-reason #显示模块引用的原因
当执行webpack命令时，会自动执行webpack.config.js配置文件，也可以自己指定配置文件路径：例如
webpack --config webpack.dev.config
module.exports={
entry:__dirname+'/src/script/main.js',
output:{
path:__dirname+'/dist/js',
filename:'bundle.js'
}
entry表示路口文件
__dirname表示根目录路径
output表示path输出文件夹路径，filename生成文件名称
也可以将配置命令直接写入package.json文件中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
执行命令npm run webpack
npm install html-webpack-plugin --save-dev #安装html依赖库
配置文件：
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:{
main:__dirname+'/src/script/main.js',
a:__dirname+'/src/script/a.js',
b:__dirname+'/src/script/b.js',
c:__dirname+'/src/script/c.js',
},
output:{
path:__dirname+'/dist',//生成文件路径
filename:'js/[name]-[chunkhash].js',//生成文件名
publicPath:'http://cdn.com/'//线上地址
},
plugins:[
new htmlWebpackPlugin({
filename:'a.html',//文件名
template:'index.html',//模板
inject:false,//脚本插入到头部里面 inject:'head'
title:'this is a',//自定义属性title值
// chunks:['main','a'],//引入模块
excludeChunks:['b','c']//排除模块
}),
new htmlWebpackPlugin({
filename:'b.html',//文件名
template:'index.html',//模板
inject:false,//脚本插入到头部里面 inject:'body'
title:'this is b',//自定义属性title值
excludeChunks:['a','c']//排除模块
}),
new htmlWebpackPlugin({
filename:'c.html',//文件名
template:'index.html',//模板
inject:false,//脚本插入到头部里面 inject:'head'
title:'this is c',//自定义属性title值
excludeChunks:['b','a']//排除模块
}),
]
}
