webpack打包流程

1.生成package.json文件

   首先我们需要在根目录下生成package.json文件，需要进入项目文件内根目录下执行命令：npm init

2.在项目文件下输入命令npm install webpack --save-dev；全局安装则为npm install webpack

3.webpack xxx.js xxx.bundle.js  把xxx.js打包成bundle.js

4.绑定css

   webpack xxx.js xxx.bundle.js --moudule-bind 'css=style-loader!css-loader'

5.--watch 自动打包

6.--progress 打包过程

7.--display-modules 打包模块

8.--display-reasons 为什么要打包这个模块

9.__dirname是node.js中的一个全局变量，它指向当前脚本所在的目录 

module.exports = {
entry:__dirname+'/src/script/main.js',//入口文件
output:{
path:__dirname+'/dist/js', //
filename:'bundle.js'
}

}

10.webpack --config webpack.dev.config.js 指定js配置文件名

11.package.json配置例子：

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --dispaly-reasons"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.3.2"
}
}

12.执行webpack命令 ---->npm run webpack

13.例子

entry:{
main:__dirname+'/src/script/main.js',
a:__dirname+'/src/script/a.js'
}
output:{
path:
filename:'[name].js' '[name]-[hash].js' '[name]-[chunkhash].js'
}
name--->对应entry对象中的main和a（当entry为对象的时候用,也就是有多个entry）;

14.html-webpack-plugin插件

plugins:[
new htmlWebpackPlugin({
filename:'index-[hash].html',
template:'index.html',
inject:'body',
title:'webpack is good'
})

15.在模板里面定义<%=htmlWebpackPlugin.options.title%>

16.遍历htmlWebpackPlugin.files

    publicPath

    chunks

    js

    css

    maiifest

17.遍历htmlWebpackPlugin.options

    template:webpack需要的模板路径

    filename:写入HTML的文件，默认为index.html,也可以在这里指定一个子目录：assets/admin.html

    hash:true | false，如果true,然后在所有包含的脚本和css文件中附加一个唯一的webpack编译哈希，这对清除缓存非常有用

    inject:true | 'head' | 'body' | false,将所有资产注入给定的template或templateContent当传递true或body时，所有js资源将被放置在body元素的底部

    compile:
　 favicon:将给定的图标路径添加输出html
    minity:压缩html
    cache:默认true,只有在更改文件时才尝试发出文件
    showErrors:
    chunks:
    excludeChunks:
    title:用于生成HTML文档的标题
    xhtml:
    date:自定义的属性