基本介绍

引入文件

// a.jsrequire('./b.js')require('style-loader!css-loader!./a.css')

打包文件

// cliwebpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!'

预览html

// html

webpack选项参数

--watch--progress--display-modules--display-reasons--color--display-error-details

基本配置

创建项目

mkdir webpack-democd webpack-demonpm initnpm install webpack --save-devmkdir srcmkdir distvsc //vscode创建html并引入bundle.js创建webpack.config.js//可参考官网配置API

//模块化输出module.exports={    //     entry:'./src/script/main.js',    output:{        path:'./dist/js',        filename:'bundle.js'    },}//cliwebpack --config webpack.dev.config.js//指定config文件为webpack.dev.config.js//

详解entry和output

entry的3种：单一字符串，数组，对象

output根绝entry不同而不同【数组】main和sub-main打包成bundle

module.exports={    entry:[    './src/script/main.js',    './src/script/sub-main.js'    ],    output:{        path:'./dist/js',        filename:'bundle.js'    },}

【对象】--多页面应用

main和打包成bundle

module.exports={    entry:{        page1:'./src/script/main.js',        page2:[            './src/script/main.js',            './src/script/sub-main.js'        ],        },    output:{        path:'./dist/js',        //【占位符】hash本次 chunkhash静态资源改变后才变化        filename:'[name]-[hash]-[chunkhash].js'    },}

使用插件

html-wabpack-plugin

作用：同步html内引入的js的chunkhash

//clinpm install html-wabpack-plugin --save-dev//webpack.config.jsvar htmlWebpackPlugin=require('html-wabpack-plugin')module.exports={    // 上下文的默认环境就是当前运行脚本的目录    // context:    entry:{        page1:'./src/script/main.js',        page2:[            './src/script/main.js',            './src/script/sub-main.js'        ],        },    output:{        path:'./dist',        // js        filename:'js/[name]-[hash]-[chunkhash].js',        // 上线环境的        publicPath:'http://m.mi.com/'    },    // 所有plugin都输出到output.path    plugin:[        //初始化插件 并传入相关参数        new htmlWebpackPlugin({            // 上下文环境 以根目录html作为模板             template:'index.html',            filename:'index-[hash].html',            inject:'head',//不配置的话 默认放到body标签内            //向html里面传参,            //在html用<%= htmlWebpackPlugin.options.title %>接收            title:'haha',//date:new Date(),            //压缩html 删除注释和空格            minify:{                removeComments:true,                collapseWhitespace:true            }        });    ]}
    
    <% for (var key in htmlWebpackPlugin.files) {%><%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %><% } %><% for (var key in htmlWebpackPlugin.options) {%><%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %><% } %>