上一篇《什么是構(gòu)建？webpack打包思想》
webpack是在node環(huán)境里跑的，所以先搭建構(gòu)建環(huán)境。node的安裝很簡單，去官網(wǎng)下載node 安裝包直接安裝即可，就跟平常軟件一樣。npm是node自帶的包管理器，對npm不熟悉建議先看：
安裝完node后，我們到D盤下，打開cmd，執(zhí)行下面的命令：
1 npm install webpack -g
// g全局安裝
2 mkdir movetest//創(chuàng)建項目目錄 movetest(隨便亂起的)
3 cd movetest
4 npm init// 生成package.json
5 npm install webpack@3//@3指定了3x版本
整個項目目錄文件如下：
dist --webpack打包后的生成目錄
src --項目代碼，里面包含index.html 和main.js
編輯webpack.config.js:
// webpack 是node環(huán)境跑的，模塊化支持CommonJS規(guī)范，不能寫成ES6的形式
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通過 npm 安裝
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'), // path node的模塊，__dirname 指當(dāng)前文件的地址，resolve方法合并地址
filename: 'my-first-webpack.bundle.js'
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
entry -- 告訴webpack解析入口，webpack只懂js
output --告訴webpack構(gòu)建后，將生成的文件放到哪里
HtmlWebpackPlugin -- 因為webpack只懂js，對其他文件的操作需要插件或者loader(后面介紹)來完成。這個插件告訴webpack，將打包后的文件引入到index.html中。而我們需要安裝這個插件，在cmd命令界面中執(zhí)行npm install html-webpack-plugin
然后index.html 和 main.js 分別：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
alert('my-first-webpack-test') // main.js
然后我們到cmd命令界面執(zhí)行：webpack --config webpack.config.js，然后我們看到webpack構(gòu)建信息，
webpack幫我們生成了兩個文件my-first-webpack.bundle.js 以及index.html， 其實就是我們配置文件webpack.config.js 中定義的 filename
同時打開dist目錄
查看index.html代碼：
有趣的是，my-first-webpack.bundle.js 代碼就比較復(fù)雜了。這里不貼圖了，但我們知道我們打包成功了。
其實webpack的構(gòu)建過程：
根據(jù)入口main.js，分析整個項目的引入了哪些js文件或者css文件或者font資源文件，然后打包構(gòu)建，輸出到我們配置的目錄下，并引入到index.html中。那么我們就可以在main.js中引入css文件和其他js文件
在src下添加reset.css 和 other.js
/*reset.css*/
body{
color: red;
font-size: 30px;
}
//other.js
document.write('如果引入成功，字體大小是30px，并且是紅色，能看到這段文字')
修改main.js
// 引入兩個文件
require('./reset.css')
require('./other.js')
同時，我們需要修改一下webpack.config.js，但是webpack只懂js,對于非js文件，我們要引入對應(yīng)的處理loader工具，我們這次要引入的是css-loader和style-loader來處理我們的css代碼
當(dāng)然，我們也要npm install css-loader style-loader。配置文件中，test是正則匹配，告訴webpack，只要你遇到是css文件，交由css-loader處理， 處理完后再由style-loader處理成style標(biāo)簽樣式引入，使其生效。OK，讓我們重新打包一下，命令行執(zhí)行 ： webpack --config webpack.config.js
打開dist/index.html
這時你可能懵逼了，為什么對html文件就用plugin，對css就用loader？其實兩者的區(qū)別是：
loader 用于對模塊的源代碼進(jìn)行轉(zhuǎn)換，它參與webpack構(gòu)建中，幫助對非JS文件的處理，或者對于那些用ES6、ES7(新js規(guī)范)寫的js文件處理，處理成webpack可識別的模塊，再由webpack打包處理；而plugin是webpack構(gòu)建周期執(zhí)行的，比如webpack構(gòu)建打包完成完成后，調(diào)用html-webpack-plugin將生成的bundle.js 注入到index.html。
一句話：loader是幫助webpack處理它不能處理的文件，變成webpack可識別的js模塊，而對應(yīng)plugin這是webpack構(gòu)建周期中的鉤子函數(shù)，比如：
開始構(gòu)建起，做點什么，
loader處理css文件，做點什么
loader處理font文件，做點什么
做點什么構(gòu)建完成后，做點什么
由plugin來擔(dān)任
OK，我們已經(jīng)明白了webpack基本概念與處理方式，接下來我們從vue-cli工具生成的工程來學(xué)習(xí)webpack的配置。
下一篇 《從vue-cli生成工程學(xué)webpack配置》
系列文章:
《什么是構(gòu)建？ webpack打包思想？》
《webpack基礎(chǔ)使用》
《從vue-cli學(xué)webpack配置1——針對webpack2》
《從vue-cli學(xué)webpack配置2——針對webpack3》
《webpack 、mainfest 、runtime 、緩存與CommonsChunkPlugin》
《webpack打包慢的解決方案》
