node安裝就自行百度吧！
確保你已經(jīng)進(jìn)入項(xiàng)目根目錄版扩，npm init 創(chuàng)建 package.json 文件?
webpack安裝可以全局安裝也可以本地安裝：
全局安裝：npm install -g webpack
本地安裝：npm install webpack --save/--save-dev
簡寫方式 ： npm i webpack -D
# –save：模塊名將被添加到dependencies，可以簡化為參數(shù)-S信峻。
# –save-dev: 模塊名將被添加到devDependencies十拣，可以簡化為參數(shù)-D羹唠。
配置webpack.config.js文件
const path = require('path');
module.exports = {
? ? entry:'入口文件',
? ? output:{
????????path:path.resolve(__dirname,'./dist'),? ?//出口文件目錄?
? ? ? ? filename:'bundle.js'? ? ? //出口文件名稱
????}
}
多入口文件名的問題時(shí)，我們使用了[name]來根據(jù)入口文件自動(dòng)生成文件名健田。（多入口文件格式為對(duì)象{--烛卧，---，--}）
多入口文件名的問題時(shí)妓局，我們使用了[name]來根據(jù)入口文件自動(dòng)生成文件名总放。
除了[name]之外，我們往往需要給文件名增加[hash]值來解決緩存的問題（即代碼更新后好爬，由于文件名的不同局雄，強(qiáng)制用戶下載最新的代碼）。
filename:'dist.[hash].js'
使用[hash]時(shí)存炮，這里的hash值炬搭，即使文件沒有改變，每次生成的結(jié)果也不同穆桂。
如果想讓模塊沒有改變時(shí)宫盔，hash值不改變，那么應(yīng)該使用[chunkhash]替代[hash]充尉。
chunk表示模塊飘言，chunkhash就是指根據(jù)模塊內(nèi)容計(jì)算出來的哈希值。
模板描述特點(diǎn)
[hash]? ? ? ? ? ? ? 模塊標(biāo)識(shí)符(module identifier)的hash? ? ? ? ? ? 每次都不同（低版本webpack可能有問題)
[chunkhash]? ? ?chunk 內(nèi)容的 hash? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 模塊內(nèi)容不變驼侠，hash值不變（不能和hash同時(shí)使用)
[name]? ? ? ? ? ? ?模塊名稱? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?就是entry的key姿鸿，單入口縮寫寫法默認(rèn)是main
[id]? ? ? ? ? ? ? ? ? ? ? ?模塊標(biāo)識(shí)符(module identifier)? ? ? ? ? ? ? ? ? ? ? ? 默認(rèn)情況下是例如'0'，'1'之類
[query]? ? ? ? ? 模塊的 query倒源，例如苛预，文件名 ?? 后面的字符串? ? ? ? ? ? ? 我也沒搞懂這個(gè)
filename:'dist.chunkhash=[chunkhash:10].name=[name].id=[id].js'
啟用了?[hash]?和?[chunkhash]?占位符。這個(gè)占位符笋熬，會(huì)根據(jù)哈希值热某，在打包好的js文件的文件名中，添加一段hash值胳螟。
而這個(gè)hash值顯然是不可預(yù)期的昔馋，如果我們每次都在html里手動(dòng)去寫這些js文件名，不僅傻糖耸，還容易漏和犯錯(cuò)秘遏。
解決步驟：
webpack不能全局安裝（雖然也可以，但是會(huì)造成污染）嘉竟，因此我們先在當(dāng)前文件夾下安裝一次webpack：npm install --save webpack邦危；
我們還需要安裝一個(gè)webpack插件：npm install --save-dev html-webpack-plugin洋侨；
除此之外，我們需要配置一下webpack文件倦蚪。做兩件事：1希坚、引入插件；2陵且、配置插件裁僧；
//webpack.config.js
//引入插件
constHtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
//入口文件，指向app.js
entry:'./app.js',//
出口文件
output:{? ? ? ??
path:__dirname+'/dist',? ? ? ?
?filename:'dist.chunkhash=[chunkhash:10].name=[name].id=[id].js
'},
//將插件添加到webpack中
plugins:[
//這里是添加的插件
newHtmlWebpackPlugin({? ? ? ? ? ??
title:'My HTML'})? ??
]}
最后滩报，如之前一樣锅知，運(yùn)行npm run test，會(huì)發(fā)現(xiàn)在dist文件夾下脓钾，除了之前的js文件售睹，還出現(xiàn)了一個(gè)html文件，而這個(gè)html文件引入了我們打包好的js文件可训。
解決一個(gè)常見需求：
我通過CDN引入jQuery（或其他類似資源）昌妹；
并且該資源可能是一個(gè)，或者多個(gè)握截；
或者是其他已經(jīng)寫在html里的文件內(nèi)容飞崖；
我不想在自動(dòng)打包好html后，再去手動(dòng)插入script標(biāo)簽或者其他類似標(biāo)簽谨胞；
因此我希望以某個(gè)html文件為模板固歪，額外加入打包好的js文件；
因此我們需要對(duì)這個(gè)插件進(jìn)行配置：[HtmlWebpackPlugin的文檔（英文）](https://github.com/jantimon/html-webpack-plugin#configuration)
對(duì)于這個(gè)需求胯努，我們只需要配置一些簡單的東西：
plugins:[
//這里是添加的插件
newHtmlWebpackPlugin({? ? ? ??
title:'title',//html的title（就是title標(biāo)簽里的東西）
filename:'index.html',//重寫后的html文件名牢裳，默認(rèn)是index.html
template:'./demo.html',//這個(gè)就是那個(gè)模板文件，不會(huì)改動(dòng)原有的內(nèi)容叶沛，而是在原來html文件的末尾蒲讯，將打包編譯好的文件添加進(jìn)去
})]
使用ES6規(guī)范的js代碼，轉(zhuǎn)為ES5灰署。（https://github.com/qq20004604/webpack-study/tree/master/5%E3%80%81Loader/babel_loader）
npm install --save babel-loader babel-core babel-preset-env webpack
但是判帮，這個(gè)只能轉(zhuǎn)一些普通的es6語法，像例如Promise溉箕、Set之類的晦墙，他是無法轉(zhuǎn)換的。
如果想要轉(zhuǎn)換這些肴茄，我們需要做一些額外的工作晌畅。
首先安裝插件
npm install? babel-runtime? --save
npm install? babel-plugin-transform-runtime? --save-dev
babel-runtime（也就是上面plugins數(shù)組中的transform-runtime），解決了輔助代碼（即讓我們可以使用新特性的代碼）被默認(rèn)添加到每一個(gè)需要他的文件的問題（這會(huì)導(dǎo)致文件過大）独郎。
具體解決方法是禁用了babel對(duì)每個(gè)文件的runtime注入踩麦，引入?babel-plugin-transform-runtime?并且使所有輔助代碼從這里引用。
表現(xiàn)效果：假如A模塊異步加載B模塊氓癌，A谓谦、B模塊里都使用了Set，那么為了使A模塊正常運(yùn)行贪婉，引入了某些代碼反粥。然后因?yàn)锽模塊又是被A模塊引入的，那么B模塊在被加載的時(shí)候疲迂，A模塊里已經(jīng)引入的代碼才顿，就沒必要再次引入了，所以B模塊里是不存在A模塊引入的那些兼容代碼的尤蒿。
不使用?.babelrc?文件郑气，而是直接寫在babel-loader里。
module: {
? ? // loader放在rules這個(gè)數(shù)組里面? ? rules: [
? ? ? ? {
? ? ? ? ? ? test: /\.js$/,
? ? ? ? ? ? exclude: /node_modules/,
? ? ? ? ? ? loader: 'babel-loader',
? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? presets: ['babel-preset-env'],
? ? ? ? ? ? ? ? plugins: ['transform-runtime']
? ? ? ? ? ? }
? ? ? ? }
? ? ]
}
或
module: {
? ? // loader放在rules這個(gè)數(shù)組里面? ? rules: [
? ? ? ? {
? ? ? ? ? ? test: /\.js$/,
? ? ? ? ? ? exclude: /node_modules/,
? ? ? ? ? ? // 區(qū)別在這里? ? ? ? ? ? use: {
? ? ? ? ? ? ? ? loader: 'babel-loader',
? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? presets: ['babel-preset-env'],
? ? ? ? ? ? ? ? ? ? plugins: ['transform-runtime']
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ]
}
