本文介紹初步使用webpack的基本步驟，了解更多查看阮一峰老師的深入淺出webpack，這本書是基于webpack3書寫的，目前已應用至webpack4，大部分內容還是相同的。
第一步：通過npm init創(chuàng)建package.json文件
npm init
第二步：生成node_modules文件
npm -y
第三步：安裝相關依賴
webpack：包含將代碼捆綁到開發(fā)和生產版本的核心。
webpack-cli：用來運行 webpack 的命令行工具。
webpack-dev-server：一個 HTML 服務器，它將在開發(fā)階段加載我們的代碼并提供 HMR 功能。
webpack-merge：一個 webpack 工具庫，允許將 webpack 配置拆分為多個文件。
ts-loader：處理 TypeScript 文件的模塊規(guī)則。
npm install webpack webpack-cli webpack-dev-server webpack-merge ts-loader css-loader style-loader url-loader --save-dev
//如果使用ts
npm install -g typescript
tsc --init
install可簡寫為i,--global可簡寫為-g,--save-dev可簡寫為-D,--save可簡寫為-S
第四步：完成如下結構
目錄結構：
目錄結構
index.html包含內容：
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Example</title>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script> <!--這是打包之后的js文件，我們命名為bundle.js-->
</body>
</html>
hello.js內容如下：
// hello.js
module.exports = function() {
let hello = document.createElement('div');
hello.innerHTML = "Hello World!";
return hello;
};
index.js內容如下：
//index.js
//引入hello.js
const hello = require('./hello.js');
document.querySelector("#root").appendChild(hello());
新建webpack.config.js，內容如下：
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.ts',//入口文件
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}, {
test: /\.css?$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}]
}, {
test: /\.(png|jpg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192, //對圖片的大小做限制，8kb
name: 'img/[name].[hash:8].[ext]'
},
}]
}],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',//輸出文件
path: path.resolve(__dirname, '../dist'),//輸出路徑
},
}
webpack.dev.js
const { merge } = require('webpack-merge')
const common = require('./webpack.config.js')
const path = require('path');
module.exports = merge(common, {
mode: 'development',
devtool: 'eval-source-map',
devServer: {
static: {
directory: path.join(__dirname, '../dist'),
},
hot: true,
},
})
上述就相當于把src文件夾下的index.js文件打包到dist文件下的bundle.js，這時就生成了bundle.js供index.html文件引用。
然后在package.json中配置scripts：
"scripts": {
"dev": "webpack serve --config ./src/webpack.dev.js"
}
編譯：npm build 運行：npm run dev
