學習之路基於webpack3.10.0，webpack4.0之后更新。
一：開始前的配置
1、初始化項目，其實就是新建一個package.json文件，后面的命令依賴里面的配置項。
npm init
2、修改npm script定義的任務，新增一項。
"scripts": {
"start": "webpack --config webpack.config.js"
}
3、安裝webpack
npm i -D webpack@3.10.0
注：--save --dev 和 --save的區別？
答：--save --dev是開發環境需要的包，添加到devDependencies里面。
--save是生產環境需要的包，添加到dependencies里面。
二：使用webpack打包Js文件
1、頁面入口文件 index.html
<html> <head> <meta charset="UTF-8"> </head> <body> <div id="app"></div> <!--導入 Webpack 輸出的 JavaScript 文件--> <script src="./dist/bundle.js"></script> </body> </html>
2、JS 工具函數文件 show.js
// 操作 DOM 元素，把 content 顯示到網頁上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通過 CommonJS 規范導出 show 函數
module.exports = show;
3、JS 執行入口文件 main.js
// 通過 CommonJS 規范導入 show 函數
const show = require('./show.js');
// 執行 show 函數
show('Webpack');
4、Webpack 在執行構建時默認會從項目根目錄下的 webpack.config.js 文件讀取配置，所以你還需要新建它，其內容如下：
const path = require('path');
module.exports = {
// JavaScript 執行入口文件
entry: './main.js',
output: {
// 把所有依賴的模塊合並輸出到一個 bundle.js 文件
filename: 'bundle.js',
// 輸出文件都放到 dist 目錄下
path: path.resolve(__dirname, './dist'),//path.resolve() 方法會把一個路徑或路徑片段的序列解析為一個絕對路徑。
} };
5、打包js文件
npm start
一切文件就緒，在項目根目錄下執行 webpack 命令運行 Webpack 構建，你會發現目錄下多出一個 dist目錄，里面有個 bundle.js 文件， bundle.js 文件是一個可執行的 JavaScript 文件。