Webpack是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。
概要
從 webpack v4.0.0 開始，可以不用引入一個配置文件。然而，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：
- 入口(entry)
- 輸出(output)
- loader
- 插件(plugins)
本文分五個部分：安裝，創建項目，配置文件，開發文件以及問題匯總
一、安裝
在安裝Webpack前，本地需要支持node.js，從官網上下載LTS版本，然后按照步驟安裝下載，其中有默認安裝地址，我選擇了自定義安裝地址。這是菜鳥教程里的步驟，可以供參考：http://www.runoob.com/nodejs/nodejs-install-setup.html
由於 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。
使用語句：npm install cnpm -g --registry=https://registry.npm.taobao.org
接着全局安裝webpack
cnpm install webpack -g / npm install webpack -g
由於現在安裝的是4.0的版本，所以還要加裝一個CLI : cnpm install webpack-cli -g / npm install webpack-cli -g
此處可能會出現一個問題：'NODE' 不是內部或外部命令，也不是可運行的程序 或批處理文件（問題1）‘webpack'不是內部或外部命令，也不是可運行的程序 或批處理文件（問題2）
二、創建項目
1、cmd打開，一般打開默認C盤，這是要 cd\ 再 d: 然后 打開你的文件 cd webpack_demo (如果沒有還未創建，可以使用 mkdir webpack_demo && cd webpack_demo )
2、初始化npm
npm init
3、本地安裝webpack
npm install webpack webpack-cli --save-dev
4、安裝loader
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。所以如果我們需要在應用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然后找到 url() 表達式然后處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。
接下來我們使用以下命令來安裝 css-loader 和 style-loader(全局安裝需要參數 -g)。
npm install css-loader style-loader
4、創建runoob1.js，runoob2.js,index.html,style.css,
5、打包文件 webpack runoob1.js -o bundle.js
6、直接打開index.html
權限問題錯誤：npm ERR! Error: EPERM: operation not permitted, open 'D:\webpack_demo\package.json'(問題3)
打包問題報錯webpack runoob1.js bundle.js(問題4)
三、配置文件
插件在 webpack 的配置信息 plugins 選項中指定，用於完成一些 loader 不能完成的工。安裝一個plugin，可以自動快速的幫我們生成HTML。
在 webpack 4 中，可以無須任何配置使用，然而大多數項目會需要很復雜的設置，這就是為什么 webpack 仍然要支持 配置文件。這比在終端(terminal)中手動輸入大量命令要高效的多，所以創建 webpack.config.js 文件，代碼如下所示：
const path = require('path'); var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = { mode:'production', entry: './runoob1.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }, module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } } ] } ] }, plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }) ] };
接下來執行webpack命令，即可生成：
你會發現多出來一個dist文件夾，直接點開里面的html文件,可以查看到結果
可能問題：1、ERROR in Entry module not found: Error: Can't resolve 'runoob1.js' in 'D:\webpack_demo' 2、Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.（問題5）
四、開發環境
在菜鳥教程中，有好幾種協助開發，這里使用了webpack-dev-server開發服務，通過 localhost:8080 啟動一個 express 靜態資源 web 服務器，並且會以監聽模式自動運行 webpack，
全局安裝 npm install webpack-dev-server -g
在package.json 中
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
webpack.config.js中
devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, },
運行npm start ,然后在瀏覽器打開 http://localhost:8080/ 輸出結果如下：
五、問題匯總：
（1）'NODE' 不是內部或外部命令，也不是可運行的程序 或批處理文件
解決：設置path
（2）‘webpack'不是內部或外部命令，也不是可運行的程序 或批處理文件
解決：由於安裝的是全局安裝，所以webpack地址未在本地安裝的文件中，要使用添加path,path中添加全局安裝webpack的地址
（3）權限問題錯誤：npm ERR! Error: EPERM: operation not permitted, open 'D:\webpack_demo\package.json'
解決：設置為管理員權限，或者直接使用win+x,選擇命令提示符（管理員），在里面運行命令就好了
（4）打包問題報錯webpack runoob1.js bundle.js
解決：webpack4版本問題：使用本語句打包即可 webpack demo.js -o demo.bundle.js
（5）ERROR in Entry module not found: Error: Can't resolve 'runoob1.js' in 'D:\webpack_demo' 2、Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
解決：初始化npm init，因為菜鳥教程中的配置是在3.0版本，版本4中的中改變，所以要做對應修改。使用官網內容時，引號內容要做相應調整。
參考列表：
1、菜鳥教程http://www.runoob.com/w3cnote/webpack-tutorial.html
2、webpack官網 https://www.webpackjs.com/concepts/loaders/
3、其他問題搜索例如：https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine