webpack 入門（0）（官翻）
0 建議最好全局先安裝一下webpack
npm install webpack -g
1 新建一個文件夾，打開該文件夾，初始化package.json文件，安裝好webpack依賴 （都是基礎的linux命令操作，必會）
mkdir webpack-demo && cd webpack-demo //新建webpack-demo文件夾並打開該文件 npm init -y //初始化package.json文件，-y可以省去一大通的默認回車設置 npm install --save-dev webpack //添加到package.json的devDependencies中
2 程序根目錄下創建 src/js 文件夾，新建index.js文件
function component () { var element = document.createElement(‘div‘); /* 用到了lodash插件中方法 */ element.innerHTML = _.join([‘Hello‘,‘webpack‘], ‘ ‘); return element; } document.body.appendChild(component());
3 新建 index.html文件
<html>
<head>
<title>webpack 2
到目前為止，在瀏覽器中打開index.html文件，可以看到hello webpack，沒有問題。但是此時任意的移動引得的js文件的位置，（如顛倒lodash和index.js的位置），頁面就會報錯。此時頁面中才僅僅是只有兩個js文件，若是文件比較多，依賴關系比較復雜的，更是麻煩。
接下來就是webpack改造的時候。
4 首先安裝lodash依賴
npm install --save lodash
5 改造 index.js文件，在文件的頂部引入 lodash模塊
import _ from ‘lodash‘; function component () { ...
6 改造index.html文件，取消對lodash插件的引用，只引用一個bundle.js文件即可，該文件是原來的文件的一個合並匯總，具體如何合並，繼續往下走。
<html>
<head>
<title>webpack 2 demo</title>
//<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
//<script src="app/index.js"></script>
<script src="dist/bundle.js"></script>
</body>
</html>
7 合並生成bundle.js文件
webpack src/js/index.js dist/bundle.js
此時運行index.html文件仍然能正常運行。同第三步之後的效果一致。
除了上面這種方法，還可以通過webpack.config.js的方式進行改造。
8 新建webpack.config.js配置文件（path是nodejs中提供的一個關於路徑的小工具）。該配置文件可以對模塊的加載規則（webpack不僅可以處理js還有css等，一切皆模塊），插件，其他的增強服務等等進行預配置。然後直接執行該配置文件也可以取得和上一個改造方法一樣的效果。
var path = require(‘path‘); module.exports = { entry: ‘./src/js/index.js‘, output: { filename: ‘bundle.js‘, path: path.resolve(__dirname, ‘dist‘) } };
webpack --config webpack.config.js //執行該配置文件
至此，我們已經羅列了兩種解決方法，一種是通過第七步合並生成bundle.js的方式，一種是通過配置文件的方式，當然也可以直接將配置文件添加到package.json的選項中，如下。
{ ... "scripts": { "build": "webpack" }, ... }
配置好了以後，直接運行
npm run build
同第八步的直接執行webpack 相關命令是一樣的效果。
好了，第一篇入門導引到此結束！！！
webpack 入門（0）（官翻）