The way of Webpack learning (I.) -- Configure Webpack from zero（從零開始配置webpack）
阿新 • • 發佈：2018-09-14
-- UNC 初始 exp light 方法 name npm .html
學習之路基於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 [email protected]
註：--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 文件。
The way of Webpack learning (I.) -- Configure Webpack from zero（從零開始配置webpack）