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 文件