前言：Webpack是一款基於node的前端打包工具，它可以將很多靜態文件打包起來，自動處理依賴關系后，生成一個.js文件，然后讓html來引用，不僅可以做到按需加載，而且可以減少HTTP請求，節約帶寬。
常用命令如下：
webpack //對項目進行打包
入口 entry
出口 output
loader 加載器
插件 plugins
====================
安裝完乘后執行webpack報錯，原因沒有找到默認入口文件：
需要在當前文件地址下創建置默認入口文件路徑 ，創建后就不會報錯了，或者也可以自定義路徑.
./src/index.js
用shell語句修改開發環境：
webpack --mode=development
或者也可以按照后文方式配置到webpack.config.js 中
1.配置與安裝
在node已經安裝完成的前提下，全局安裝webpack
$ cd d:
$ mkdir test && cd test //創建test ，並進入
$ npm install -g webpack //等待100s，安裝完成，也可以使用淘寶鏡像
$ npm init //初始化package.json文件
$ npm install --save-dev webpack //添加依賴 ，在package.json中聲明依賴,等待安裝完成
2.基本操作$webpack main.js webpack.js
當前目錄下創建如下工作結構:
/---------test
----app
----main.js
----index.js
----index.html
項目目錄下，app文件夾含有兩個js文件，修改如下：
//main.js ，這是Webpack主要的入口文件
require('./index.js');
//index.js ，這是被主文件引用的文件
document.write('Hello,world!');
//index.html ，供瀏覽器解讀
<html>
...
<script src="./webpack.js"> // 引用同目錄下的webpack.js
...
</html>
webpack.js是哪來的呢？就是通過webpack打包生成的js文件，接下來，
開始生成webpack.js文件：
$ webpack main.js webpack.js
可以看到已經打包成功了，此時查看IDE中的項目目錄，根目錄下已經多了一個webpack.js文件。然后用瀏覽器打開index.html，效果如下：
此時查看網頁源代碼：
3.進階操作
（配置webpack.config.js或者配置package.json，后者依賴前者）每次在命令行敲目錄調試，是很痛苦的，因此需要一次配置，多次使用的方法。
在根目錄下新建文件： webpack.config.js (名字就是這樣，規定，不能改)，內容如下：
var path = require('path'); module.exports = { //手動入口文件位置 entry:__dirname+'/X-admin/js/xadmin.js', //出口 output:{ //路徑 path:__dirname, //或者換一種寫法：path：path.resolve(__dirname,"dist") //注意：__dirname 就是根目錄，然后是有兩個下划線，打包到dist下; filename:'webpack.js' }, mode:'development' }
這里的 __dirname是一個node的全局變量，用於指向當前的工作目錄，調皮的我console.log了一下這個變量：
確認無疑。
這樣，我們的webpack.js寫完以后，可以直接在命令行中敲：
$ webpack
1
可以發現，項目中也同樣的會生成目標js文件，也就是webpack.js，這樣非常方便，省事。
還有一種配置方法，將package.json文件中”scripts”里面添加鍵值對：
這樣同樣可以在項目目錄生成目標js文件，直接在 命令行里敲
$ npm start //因為webpack是全局安裝的，直接value給webpack，而不用跟路徑
1
如果start被占用了/沖突了，也可以在scripts下面自定義一個鍵值對：
"zq":"webpack"
$ npm run zq //稍作修改cmd 命令
最后還是可以生成。
4.webpack服務器監聽代碼變動，自動刷新及source-map
4.1關於source-map，
也就是在webpack.config.js中配置 devtool (develpment tool)的值，例如我這樣配置：
在webpack完成文件打包后，會自動生成一個與目標文件相同名的 .map文件，用來說明打包文件的每個地方對應的是哪些文件，簡而言之，讓你能知道源碼是在哪里錯的，幫你刨根問底，而不用開發者自己去Debug。
參考文章1：入門WEBPACK，看這篇文章就夠了—-簡書
參考文章2：Webpack中的sourcemap
4.2 webpack服務器
首先單獨安裝 server 包 ：
$ npm install --save-dev webpack-dev-server
1
同樣的，在webpack.config.js中做出相應的配置：
module.exports = { devtool: 'source-map', entry: __dirname + "/app/main.js", output: { path: __dirname, filename: 'bundle.js' }, module: { }, devServer: { contentBase: "./",//本地服務器加載index.html頁面所在的目錄，這里寫的是根目錄 historyApiFallback: true,//不跳轉 inline: true//實時刷新, } }
配置好config后，還得配置一下package.json，在scirpts里面添加server：
"scripts": { "start": "webpack", "server": "webpack-dev-server --open", "test": "echo \"Error: no test specified\" && exit 1" },
接着，在命令行運行
$ npm run server
/*屆時服務器會自動啟動， 並且打開瀏覽器,默認端口為8080，也可以
devServer:{ port:4040 //自己配置端口為4040 }
下面是一個服務器跑起來后的演示結果，我不斷的修改work.js 中 document.write的值，從而服務器會自動檢測並刷新頁面：
5.非JS文件的操作(img,json,css……),豬腳：Loaders
5.1 基本概念
前面都在說js文件，官網說什么文件都可以當做模塊打包，下面就來試試非js文件。
首先要明確的是，webpack只能識別js文件，如果要識別非js文件，就需要loader來解析這些文件。
loaders 需要單獨安裝，並且在webpack.config.js中的modules關鍵字下進行配置。
Webpck2以上已經支持對json的解析打包，不需要額外的loaders，可以在main.js中
var json = require('../package.json')//json在它的上級目錄
document.write(json.scripts.server);
運行結果 ：
可見，網頁中，沒有通過任何第三方loader，即可將json解析並打包成bundle.js。
5.2 Bable
Bable可以使得開發者使用最新的ECMAscript標准來書寫代碼，而不用管新標准是否被當前使用的瀏覽器完全支持。
還是需要單獨安裝Bable的包：
$ npm install --save-dev babel-core babel-loader babel-preset-env
安裝完成后，在webpack.config.js下的module關鍵字下進行配置：
module.exports = { devtool: 'source-map', entry: __dirname + "/app/main.js", output: { path: __dirname, filename: 'bundle.js' }, devtool: 'eval-source-map', devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時刷新 }, module: { rules: [ { test: /\.js$/, //正則匹配，必須 use: { //使用到的loader loader: "babel-loader", //loader名 options: { //選項 presets: [ //預先配置 "env" ] } }, exclude: /node_modules/ //不包含的目錄或文件 } ] } };
5.3 CSS文件處理
webpack提供兩個工具處理樣式表，css-loader 和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(…)的方法實現 require()的功能,style-loader將所有的計算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。
同樣先安裝兩個包 style-loader和css-loader
$ npm install --save-dev style-loader css-loader 1 module: { rules: [ {.......}， { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } 也可以簡寫： { test:/\.css$/. use:[{ loader:"style!css" //這里的執行順序是從右往左，css應該在style之前執行 }] }
根目錄下新建 ./src/index.css，寫一個body的背景為green，然后在入口文件main.js中,require(‘../src/index.css’)，接着通過命令行$ webpack
此時查看index.html，發現頁面背景已經變成綠色
6.插件plugins
先安裝插件的包：
cnpm install html-webpack-plugin
1
在webpack.config.js中 頭部，引入依賴：
let webpack = require('webpack');
1
然后在webpack.config.js中配置根鍵值對：
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究')
],