webpack打包工具

通常与React或Vue结合起来用

npm init  //初始化
npm install webpack –save-dev //安装
webpack xxx.js  xxx.bundle.js  //打包

webpack自身只理解JavaScript，支持AMD，CMD，ES6，不支持CSS样式的引入，loader可以将所有类型的文件转换为webpack能够处理的有效模块。

例如

require(‘style-loader!css-loader./style.css’)

利用npm install css-loader style-loader –save-dev来安装loader

css-loader使得webpack可以处理css文件

style-loader将css文件插入到style标签中，该操作在css-loader处理之后。

可以利用webpack xxx.js xxx.bundle.js –module-bind’css=style-loader!css-loader’一次性将css-loader, style-loader加入模块

命令webpack xxx.js xxx.bundle.js –module-bind’css=style-loader!css-loader’ –watch每次更新后webpack自动打包。

webpack配置

新建一个webpack.config.js文件，然后利用CMD中的模块化工具

module.exports= {
   entry:’./src/xxx.js’,
   output: {
     path:’./dist/js’,
filename:’bundle.js’
}
}

entry是webpack打包的入口，entry可为数组，也可为对象。若为对象时，后面生成的路径会覆盖前面的路径，因此需要给output里面的filename属性设置占位符，如[name],[hash],[chunkhash]

运行webpack

npm run webpack

html-webpack-plugin可以设置不确定的路径名，即将html与webpack打包的不确定路径名的js绑定在一起。安装时也用npm install

var htmlWebpackPlugin = require(‘html-webpack-plugin’)
module.exports= {
   entry:’./src/xxx.js’,
   output: {
     path:’./dist/js’,
     filename:’bundle.js’
  }
  plugins:[
    new htmlWebpackPlugin();
  ]
}

通过以上的方式，绑定js文件的html文件不是根目录下的html，需要对new htmlWebpackPlugin()传参

new htmlWebpackPlugin({
template：‘index.html’//根目录文件
});

多页面的话，实例化多个new htmlWebpackPlugin()，并传入相应的参数即可。
模板引用的话使用<%= htmlWebpackPlugin.options.xxx %>来获取相应的值
<% ….%>直接引用js 文件