上一篇《什么是構(gòu)建闷畸？webpack打包思想》
webpack是在node環(huán)境里跑的播歼，所以先搭建構(gòu)建環(huán)境懊纳。node的安裝很簡(jiǎn)單乎完，去官網(wǎng)下載node 安裝包直接安裝即可熏兄，就跟平常軟件一樣。npm是node自帶的包管理器树姨，對(duì)npm不熟悉建議先看：
安裝完node后摩桶，我們到D盤下，打開(kāi)cmd帽揪，執(zhí)行下面的命令：
1 npm install webpack -g
// g全局安裝
2 mkdir movetest//創(chuàng)建項(xiàng)目目錄 movetest(隨便亂起的)
3 cd movetest
4 npm init// 生成package.json
5 npm install webpack@3//@3指定了3x版本
整個(gè)項(xiàng)目目錄文件如下：
dist --webpack打包后的生成目錄
src --項(xiàng)目代碼硝清，里面包含index.html 和main.js
編輯webpack.config.js:
// webpack 是node環(huán)境跑的，模塊化支持CommonJS規(guī)范转晰，不能寫成ES6的形式
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通過(guò) 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 -- 因?yàn)閣ebpack只懂js变汪，對(duì)其他文件的操作需要插件或者loader(后面介紹)來(lái)完成侠坎。這個(gè)插件告訴webpack，將打包后的文件引入到index.html中裙盾。而我們需要安裝這個(gè)插件实胸，在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幫我們生成了兩個(gè)文件my-first-webpack.bundle.js 以及index.html庐完， 其實(shí)就是我們配置文件webpack.config.js 中定義的 filename
同時(shí)打開(kāi)dist目錄
查看index.html代碼：
有趣的是，my-first-webpack.bundle.js 代碼就比較復(fù)雜了徘熔。這里不貼圖了门躯，但我們知道我們打包成功了。
其實(shí)webpack的構(gòu)建過(guò)程：
根據(jù)入口main.js酷师，分析整個(gè)項(xiàng)目的引入了哪些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
// 引入兩個(gè)文件
require('./reset.css')
require('./other.js')
同時(shí)，我們需要修改一下webpack.config.js，但是webpack只懂js,對(duì)于非js文件瘫里，我們要引入對(duì)應(yīng)的處理loader工具实蔽，我們這次要引入的是css-loader和style-loader來(lái)處理我們的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
打開(kāi)dist/index.html
這時(shí)你可能懵逼了统舀，為什么對(duì)html文件就用plugin，對(duì)css就用loader劳景？其實(shí)兩者的區(qū)別是：
loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換誉简，它參與webpack構(gòu)建中，幫助對(duì)非JS文件的處理盟广，或者對(duì)于那些用ES6闷串、ES7(新js規(guī)范)寫的js文件處理，處理成webpack可識(shí)別的模塊筋量，再由webpack打包處理烹吵；而plugin是webpack構(gòu)建周期執(zhí)行的，比如webpack構(gòu)建打包完成完成后桨武，調(diào)用html-webpack-plugin將生成的bundle.js 注入到index.html肋拔。
一句話：loader是幫助webpack處理它不能處理的文件，變成webpack可識(shí)別的js模塊呀酸，而對(duì)應(yīng)plugin這是webpack構(gòu)建周期中的鉤子函數(shù)凉蜂，比如：
開(kāi)始構(gòu)建起，做點(diǎn)什么性誉，
loader處理css文件窿吩，做點(diǎn)什么
loader處理font文件，做點(diǎn)什么
做點(diǎn)什么構(gòu)建完成后艾栋，做點(diǎn)什么
由plugin來(lái)?yè)?dān)任
OK爆存，我們已經(jīng)明白了webpack基本概念與處理方式，接下來(lái)我們從vue-cli工具生成的工程來(lái)學(xué)習(xí)webpack的配置蝗砾。
下一篇 《從vue-cli生成工程學(xué)webpack配置》
系列文章:
《什么是構(gòu)建先较？ webpack打包思想携冤？》
《webpack基礎(chǔ)使用》
《從vue-cli學(xué)webpack配置1——針對(duì)webpack2》
《從vue-cli學(xué)webpack配置2——針對(duì)webpack3》
《webpack 、mainfest 闲勺、runtime 曾棕、緩存與CommonsChunkPlugin》
《webpack打包慢的解決方案》
