提供一個作者自己基于 webpack 搞好的一個下載包，可以看看https://github.com/chichengyu/webpack
介紹 webpack 之前，我們先看看 nrm ：
nrm 提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時候的服務器地址；
什么是鏡像：原來包剛一開始是只存在于國外的NPM服務器，但是由于網(wǎng)絡原因，經(jīng)常訪問不到，這時候，我們可以在國內(nèi)，創(chuàng)建一個和官網(wǎng)完全一樣的NPM服務器，只不過，數(shù)據(jù)都是從人家那里拿過來的，除此之外，使用方式完全一樣；
- 運行
npm i nrm -g全局安裝nrm包； - 使用
nrm ls查看當前所有可用的鏡像源地址以及當前所使用的鏡像源地址； - 使用
nrm use npm或nrm use taobao切換不同的鏡像源地址；
注意： nrm 只是單純的提供了幾個常用的 下載包的 URL地址，并能夠讓我們在 這幾個 地址之間，很方便的進行切換，但是，我們每次裝包的時候，使用的 裝包工具，都是 npm
網(wǎng)頁中引入的靜態(tài)資源多了以后有什么問題？？？
- 網(wǎng)頁加載速度慢， 因為 我們要發(fā)起很多的二次請求；
- 要處理錯綜復雜的依賴關(guān)系
而webpack可以解決上面的問題，webpack 是前端的一個項目構(gòu)建工具，它是基于 Node.js 開發(fā)出來的一個前端工具。
webpack與gulp區(qū)別
- 使用Gulp， 是基于 task 任務的；
- 使用Webpack， 是基于整個項目進行構(gòu)建的；
- 借助于webpack這個前端自動化構(gòu)建工具，可以完美實現(xiàn)資源的合并、打包、壓縮、混淆等諸多功能。
webpack安裝
- 運行
npm i(install) webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令（npm uninstall webpack -g卸載 ）
安裝指定版本
npm i webpack@3.3.0 -g - 在項目根目錄中運行
npm i webpack --save-dev安裝到項目依賴中，安裝webpack到項目中時的打包命令，如：
./node_modules/.bin/webpack ./src/main.js -o ./dist/bundle.js
npm install webpack@3.3.0 --save-dev
清除安裝內(nèi)存
cnpm cache clean
cnpm cache clean --force // 4.0以上版本注意：
1.webpack4.0以后需要加上 -o 表示--output輸出的意思（如：webpack ./1.js -o ./2.js）
2.可能還需要先 npm install webpack -D(--save-dev) 安裝后，才能進行打包
3.當前項目根目錄還沒有 package,json文件時，使用 npm init -y 就可以生成，不過需要注意的是，當前還沒有安裝 npm i webpack 時，必須先刪除 package,json文件，當 webpack 安裝后，再使用 npm init -y 生成 package.json文件，不然會報錯。（如果使用了 -f（代表force）、-y（代表yes），則跳過提問階段，直接生成一個新的 package.json 文件）
注意：4.0以上的且需要安裝熱替換的可以直接輸入
npm install webpack webpack-cli webpack-dev-server --save-dev
一次性把需要的依賴安裝完。
如果不成功，可單獨安裝 Webpack 開發(fā)工具
npm install webpack-dev-server --save-dev
注意：運行熱替換 webpack-dev-server時，必須把webpack安裝到項目依賴
為了使用方便，可以在package.json中的 scripts配置一些使用的命令如下：
"scripts":{
// 名稱:值
// --open 表示運行命令就自動打開瀏覽器，--port 端口3000，--contentBase src 打開瀏覽器后自動打開根目錄 src，--hot 可以使修改后的實現(xiàn)局部打包,同時瀏覽器自動刷新
"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
}
然后在命令行直接輸入 npm run dev 就執(zhí)行了。（--open 表示運行命令就自動打開瀏覽器，--port 端口3000，--contentBase src 打開瀏覽器后自動打開根目錄 src，--hot 可以使修改后的實現(xiàn)局部打包,同時瀏覽器自動刷新），
第二種配置方法
在配置文件中加入 devServer，如下：
// 先修改 package.json中的命令
"scripts":{
"dev":"webpack-dev-server"
}
// 在 webpack.config.js配置文件中中加入
const webpack = require('webpack');
devServer:{
open:true,// 自動打開瀏覽器
port:3000,// 運行端口
contentBase:'src',// 指定托管的根目錄
hot:true// 啟動熱更新
//但是通過日志發(fā)現(xiàn)頁面先熱更新然后又自動刷新，這和自動刷新是一樣的。
//如果只需要觸發(fā)HMR，可以再加個參數(shù)hotOnly:true,這時候只有熱更新，禁用了自動刷新功能。
//如果需要自動刷新就不需要設置熱更新。
hotOnly:true// 只有熱更新，禁用自動刷新功能
//服務端壓縮是否開啟
compress:true,
},
plugins:[
//熱更新插件 new一個熱更新模塊對象
new webpack.HotModuleReplacementPlugin(),
]
此時，可以安裝一個在內(nèi)存中生成 html 頁面與處理路徑的插件
npm i html-webpack-plugin -D
在 webpack.config.js 配置文件中加入如下：
const htmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
// 在內(nèi)存中創(chuàng)建一個 html 頁面的插件
new htmlWebpackPlugin({
// 指定模板頁面，將來會根據(jù)指定的頁面路徑去生成內(nèi)存中的頁面
template:path.join(__dirname,'./src/index.html'),
// 內(nèi)存中生成的頁面的名稱
filename:'index.html'
})
]
'html-webpack-plugin'插件的作用：
1.自動在內(nèi)存中根據(jù)指定的頁面生成一個內(nèi)存的頁面
2.自動把打包好的 bundle.js 以正確的路徑引入到頁面底部，不需要我們手動處理 bundle.js 的路徑。
css處理安裝
包括less、scss、url路徑
npm i style-loader css-loader -D
// less-loader 內(nèi)部需要 依賴 less，所有需要安裝 less
npm i style-loader less -D
npm i style-loader less-loader -D
// sass-loader 需要 內(nèi)部依賴 node-sass，所有需要安裝 node-sass
npm i style-loader node-sass -D
npm i style-loader sass sass-loader -D
// url路徑 內(nèi)部依賴 file-loader
npm i style-loader url-loader file-loader -D
Babel高級語法轉(zhuǎn)低級
// 相當于轉(zhuǎn)換工具 轉(zhuǎn)換器
npm i babel-core babel-loader babel-plugin-transform-runtime -D
// 相當于語法 語法對應插件
npm i babel-preset-env babel-preset-stage-0 -D
env 是比較新的語法，包含了所有和es相關(guān)的語法
在 webpack.config.js 配置文件中加入匹配規(guī)則
module: { // 這個節(jié)點，用于配置 所有 第三方模塊 加載器
rules: [ // 所有第三方模塊的 匹配規(guī)則
{
test: /\.js$/, // 處理以.js結(jié)尾的文件
use:'babel-loader', //用babel-loader處理
exclude:/node_modules/ // exclude 排除,不需要編譯的目錄,提高編譯速度(node_modules是模塊安裝的位置,不需要編譯)
}
]
}
然后，在創(chuàng)建一個用于babel調(diào)用的文件，名為.babelrc，規(guī)范與json文件一樣不能注釋，且必須是雙引號，內(nèi)容如下：
{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"]
}
可以把 presets 理解成語法。
注意：在webpack打包前會，先進行 babel 轉(zhuǎn)碼，再打包，此時因為引入了第三方包文件，有些 js 文件會報錯如下：
bundle.js:34694 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
造成的原因可能是再引入的包中，運用了 "caller" "callee" "argusments" 這些再嚴格模式下不能用，而 webpack 默認啟用嚴格模式，所以沖突了。
解決方案：1
安裝一個插件，移除嚴格模式
// 移除嚴格模式插件
npm install babel-plugin-transform-remove-strict-mode
然后在 .babelrc 文件的 "plugins" 加入如下：
{
"plugins": ["transform-remove-strict-mode"],
}
表示移除 webpack 打包時的嚴格模式。
解決方案：2
此時，我們就需要對引入的第三方包進行忽略(意思就是 不進行轉(zhuǎn)碼，只打包)，再 .babelrc 文件中,加入 .ignore 就是忽略的意思， 最終如下：
{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"],
"ignore":["./src/lib/mui/js/mui.min.js"]
}
我此處引入mui.min.js時，會報錯上面那個嚴格模式錯誤，加入了這個，表示對這個文件 不轉(zhuǎn)碼，只打包，就ok了
vue包安裝
npm i vue-loader vue-template-compiler -D
在 webpack.config.js 配置文件中，加入：
module:{
rules:[
{ test: /\.vue$/, use:"vue-loader"}, // 配置處理 .vue組件文件的 第三方 loader 規(guī)則
]
}
main.js入口文件
入口文件 main.js,內(nèi)容如下：
// 處理 css 文件 npm i style-loader css-loader -D
import "./src/css/index.css";
// 處理 less 文件 npm i less-loader -D
import "./src/css/index.less";
// 處理 scss 文件 npm i sass-loader -D
import "./src/css/index.scss";
// 引入bootstrap font 字體文件 npm i bootstrap -S
import "bootstrap/dist/css/bootstrap.css";
webpack.config.js配置文件
在webpack.config.js對象身上，有一個model，它是一個對象，在這個對象身上，有個rules屬性，這個rules屬性是個數(shù)組，這個數(shù)組中存放了所有第三方文件的匹配和處理規(guī)則
為了使用方便，一般需要一個配置文件，內(nèi)容如下：
const path = require('path');
// 通過node中的模塊操作，向外暴露了一個配置對象
module.exports = {
mode: 'production',
entry:path.join(__dirname,'./src/main.js'),// 待打包的入口文件
output:{
path:path.join(__dirname,'./dist'),// 打包到那個目錄
filename:'bundle.js'// 打包后的文件名稱
},
plugins:[
//熱更新插件 new一個熱更新模塊對象
new webpack.HotModuleReplacementPlugin(),
// 在內(nèi)存中創(chuàng)建一個 html 頁面的插件
new htmlWebpackPlugin({
// 指定模板頁面，將來會根據(jù)指定的頁面路徑去生成內(nèi)存中的頁面
template:path.join(__dirname,'./src/index.html'),
// 內(nèi)存中生成的頁面的名稱
filename:'index.html'
})
],
module: { // 這個節(jié)點，用于配置 所有 第三方模塊 加載器
rules: [ // 所有第三方模塊的 匹配規(guī)則
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置處理 .css 文件的第三方loader 規(guī)則
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置處理 .less 文件的第三方 loader 規(guī)則
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置處理 .scss 文件的 第三方 loader 規(guī)則
{ test: /\.(jpg|png|jpeg|gif|bmp)$/, use: "url-loader?limit=7631&name=[hash:8]-[name].[ext]" }, // 配置處理 圖片路徑 文件的 第三方 loader 規(guī)則，?limit限制小于7631個字節(jié)的圖片會用base64轉(zhuǎn)碼，name表示還是用圖片原來的名稱且前面加上8位的hash哈希值，防止文件名稱沖突，ext還是圖片原來的后綴
{ test: /\.(ttf|eot|woff|woff2)$/, use:"url-loader"}, // 配置處理 font 字體文件的 第三方 loader 規(guī)則
{ test: /\.js$/, use:"babel-loader",exclude:/node_modules/}, // 配置處理 高級語法轉(zhuǎn)低級語法的 第三方 loader 規(guī)則
{ test: /\.vue$/, use:"vue-loader"}, // 配置處理 .vue組件文件的 第三方 loader 規(guī)則
]
},
resolve:{
alias:{
// 修改 vue 被導入時的路徑 $ 表示以 vue 結(jié)尾
"vue$":"vue/dist/vue.esm.js",
// 給根目錄下的 src 目錄配置別名。方便引入文件
// 注意：在模板組件中的 <style>引入樣式 需要加 ~ 波浪線
// 如：import '~@css/style.css'
"@": resolve("src")
}
}
}
__dirname 當前運行的js文件所在的目錄，配置文件一般放在根目錄下。
注意
1、在 vue-cli 腳手架中，當在 resolve 中設置了路徑別名后，在模板組件中的 <style> 中引入樣式 需要加 ~ 波浪線，如： import '~@css/style.css' 。
2、在 vue-cli 腳手架中，在模板組件中的 <style> 中的樣式可以穿透子組件，不受 scoped 限制，如： .swiper >>> .swiper-action { color:red }，>>>表示樣式穿透，表示 .swiper 里面所有子組件，出現(xiàn) .swiper-action 的都應用這個樣式
真機測試
先在電腦上下載一個熱點，比如：360wifi、獵豹無限wifi，然后將手機鏈接上熱點，接著 cmd 窗口輸入 ipconfig ，查看 《無限局域網(wǎng) 適配器 本地鏈接* 》這一欄，找到 《IPv4》的這個 ip地址，復制一下，然后的打開 package.json 文件，再 "dev" 后加上一項 --host 指定一下 ip（默認是localhost） 如下：
"scripts":{
// --open 表示運行命令就自動打開瀏覽器，--port 端口3000，--contentBase src 打開瀏覽器后自動打開根目錄 src，--hot 可以使修改后的實現(xiàn)局部打包,同時瀏覽器自動刷新，--host 指定ip地址
"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot --host 172.23.232.1"
}
此時，就可以在 手機上輸入 172.23.232.1 地址就能訪問到當前正在開發(fā)的項目。
webpack命令
webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包
webpack --watch //監(jiān)聽變動并自動打包
webpack -p //壓縮混淆腳本，這個非常非常重要！
webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了
