webpack初体验命令

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']//排除模块
        }),
    ]
}