什么是webpack
Webpack是一個現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器。它把你的項目當做一個整體，通過給定的入口文件開始找到你的項目所有依賴模塊，使用loaders處理它們，最后打包為一個或多個瀏覽器可識別的JavaScript文件，可以減少頁面請求，優(yōu)化網(wǎng)頁性能。
如何使用Webpack
一、安裝node JS (webpack在執(zhí)行打包壓縮的時候是依賴nodejs的)，請參考node JS官網(wǎng)進行下載安裝
二、初始化一個node js模塊
1、創(chuàng)建一個目錄并在終端中進入當前目錄執(zhí)行npm init -y
2、安裝webpack和webpack-cli(命令行工具)：
npm install webpack webpack-cli --save-dev
或者使用淘寶鏡像安裝,請直接百度“npm 淘寶鏡像”，安裝過淘寶鏡像后再安裝其他安裝包時可直接把上面命令行的npm替換成cnpm
下面是我的目錄結(jié)構(gòu)（除了node_modules和package.json是自動生成的，其他文件都要手動添加）
三、打開webpack.config.js文件，定義入口和輸出
entry：是 頁面入口文件配置 （html文件引入唯一的js 文件）
output：對應(yīng)輸出項配置
path ：入口文件最終要輸出到哪里，
filename：輸出文件的名稱
publicPath：公共資源路徑
四、在package.json文件中添加一個npm腳本，這樣運行本地的webpack比較方便
五、在終端中運行 npm run build 就可以在dist文件夾下生成打包后的bundle.js文件
如何使用Webpack處理除javascript以外的文件
安裝loader允許webpack處理那些非javascript文件（webpack自身只能處理javascript）,將對應(yīng)類型的文件轉(zhuǎn)換為webpack能夠處理的模塊。
接下來我們繼續(xù)配置loader, 通過加載器處理文件：比如 sass less 等, 告知 webpack 每一種文件都需要使用什么加載器來處理。
為了方便我們先統(tǒng)一把所有的包都先下載下來
npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev處理樣式文件
一、安裝css-loader、style-loader ：
npm install css-loader style-loader --save-dev
css-loader:允許webpack打包依賴的css文件
style-loader:將css-loader處理后的樣式注入到html的head內(nèi)
二、在webpack.config.js配置文件中配置loader,如下：
處理es6/7語法
一、安裝babel-loader：
npm install babel-loader babel-core babel-preset-latest --save-dev
babel-loader:babel 是一個編譯js的平臺，他可以幫你達到以下目的：
1、讓你能使用最新的javascript代碼（es6、es7...）,而不用管新標準是否被當前使用的瀏覽器完全支持
2、讓你能使用基于javascript進行了擴展的語言
二、在webpack.config.js配置文件中配置loader,如下：
處理vue組件語法
一、安裝vue-loader和vue：
npm install vue-loader vue-template-compiler --save-dev
npm install vue --save
vue-loader:是一個vue加載器，能夠?qū)ⅹ毩⒌膙ue組件編譯成javascript模塊
二、在webpack.config.js配置文件中配置loader,如下：
要處理vue組件還需要在webpack.config.js配置文件中引入插件，以下標出來的是要新增的：
自動生成html文件
一、安裝HtmlWebpackPlugin：
npm install html-webpack-plugin --save-dev
HtmlWebpackPlugin:自動生成html文件（index.html），也可以根據(jù)給定的模板文件在他的基礎(chǔ)上來生成新的html文件，而且會在文件中自動引用webpack生成的bundle.js文件。
new多個實例可以生成多個html文件
二、在webpack.config.js配置文件中配置如下,還有很多選項可以參考htmlwebpackplugin官網(wǎng)配置
dist文件夾生成出來后的文件列表：
小工具: webpace-dev-server --devtool eval-source-map --progess --colors --open --port 8080 --hot
打包時輸入這一行可以直接找到文件如果出錯時的位置
小知識點: 上面這一句話如果覺得太長可以將
'scripts': {'test': 'echo \'Error: no test specified\' && exit 1','dev': 'webpack-dev-server --devtool eval-source-map --progress --colors --open --port 8080 --hot'},
這一段代碼放到項目目錄下的package.json里,
這樣調(diào)試時如果輸入npm run dev就等于輸入那一長串代碼
掃描二維碼
