一、管理文件輸出
項(xiàng)目結(jié)構(gòu):
webpack-test
|- package.json
|- webpack.config.js
|- dist
|- index.html
|- src
|- index1.js
|- index2.js
|- node_modules
index1.js
export default function() {
console.log('this is index1.js!');
}
index2.js
export default function() {
console.log('this is index2.js!');
}
index.html
<!doctype html>
<html>
<head>
<title>Webpack Test</title>
</head>
<body>
<script src="./a.bundle.js"></script>
<script src="./b.bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry: {
a: './src/index1.js',
b: './src/index2.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
npm script中添加腳本命令：
"scripts": {
"build": "webpack",
}
使用HtmlWebpackPlugin
運(yùn)行命令，就會(huì)發(fā)現(xiàn)dist目錄下生成了a.bundle.js和b.bundle.js诉儒。但如果萝招，更改配置中的入口文件的名稱夫否，相應(yīng)的index.html也要修改奕塑，這就會(huì)很麻煩械姻。HtmlWebpackPlugin插件在構(gòu)建時(shí)每次都創(chuàng)建一個(gè)index.html替代之前的index.html悍引，新創(chuàng)建的html文件中包含使用script標(biāo)簽的body中的所有webpack包恩脂。這對(duì)bundle名稱在每次編譯之后都變化（如以哈希值命名）的情況下很有效。
安裝
npm install --save-dev html-webpack-plugin
修改webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
- a: './src/index1.js',
- b: './src/index2.js'
+ 1: './src/index1.js',
+ 2: './src/index2.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Webpack Test' // 生成的html文件的標(biāo)題
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
運(yùn)行 npm run build趣斤，就會(huì)發(fā)現(xiàn)HtmlWebpackPlugin創(chuàng)建了一個(gè)新的index.html俩块，而且包含新的bundle。
使用ExtractTextWebpackPlugin
ExtractTextWebpackPlugin插件會(huì)將所有入口chunk中的.css文件移動(dòng)到獨(dú)立分離的 CSS 文件浓领，并插入到index.html文件的 <link>標(biāo)簽中玉凯。它可以跟js bundle并行加載。
安裝
npm install --save-dev extract-text-webpack-plugin
在src目錄下添加index1.css和index2.css:
.index1: {
color: red;
}
.index2: {
color: red;
}
然后在index1.js和index2.js里分別引入css文件：
index1.js：
import './index1.css';
index2.js：
import './index2.css';
修改webpack.config.js：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const ExtractTextPlugin= require('extract-text-webpack-plugin');
module.exports = {
entry: {
1: './src/index1.js',
2: './src/index2.js'
},
plugins: [
+ new ExtractTextPlugin('[name].css'), // 每個(gè)入口 chunk 都生成一個(gè)對(duì)應(yīng)的文件
new HtmlWebpackPlugin({
title: 'Webpack Test'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}联贩，
+ module: {
+ rules: [{
+ test: /\.css$/,
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader', // 應(yīng)用于當(dāng)css沒(méi)有被提取的時(shí)候
+ use: 'css-loader' // 用于將css文件轉(zhuǎn)換成一個(gè)導(dǎo)出模塊
+ })
+ }]
+ }
};
運(yùn)行 npm run build漫仆，就會(huì)發(fā)現(xiàn)index.html中新增了兩個(gè) <link>標(biāo)簽。
使用CleanWebpackPlugin
如果修改入口文件名稱再進(jìn)行構(gòu)建泪幌，則會(huì)導(dǎo)致dist目錄下遺留上一次的bundle文件等盲厌。所以dist目錄下多出了很多不必要的文件署照，應(yīng)該先清理掉。
安裝
npm install clean-webpack-plugin --save-dev
修改webpack.config.js：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin= require('extract-text-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
1: './src/index1.js',
2: './src/index2.js'
},
plugins: [
+ new CleanWebpackPlugin(['dist']), //清空dist目錄
new ExtractTextPlugin('[name].css'), // 每個(gè)入口 chunk 都生成一個(gè)對(duì)應(yīng)的文件
new HtmlWebpackPlugin({
title: 'Webpack Test'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}吗浩，
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader', // 應(yīng)用于當(dāng)css沒(méi)有被提取的時(shí)候
use: 'css-loader' // 用于將css文件轉(zhuǎn)換成一個(gè)導(dǎo)出模塊
})
}]
}
};
運(yùn)行 npm run build建芙，就會(huì)發(fā)現(xiàn)dist目錄下只剩下新構(gòu)建的文件。
二拓萌、自動(dòng)構(gòu)建
每次修改項(xiàng)目文件之后岁钓，都要運(yùn)行 npm run build 命令去重新構(gòu)建十分繁瑣。而webpack提供了三種方案在修改文件之后進(jìn)行自動(dòng)構(gòu)建：
- 觀察模式（Watch Mode）
- webpack-dev-server （多數(shù)）
- webpack-dev-middleware
1. 觀察模式
在 npm script 腳本中添加命令：
"watch": "webpack --watch",
然后運(yùn)行 npm run watch微王，會(huì)看到Webpack is watching the files…且命令行不會(huì)退出屡限，srcipt腳本仍然在觀察文件。使用觀察模式需要手動(dòng)刷新瀏覽器才能看到修改后的效果炕倘。
2. webpack-dev-server
webpack-dev-server提供了簡(jiǎn)單的web服務(wù)器钧大，并實(shí)時(shí)重新加載。
安裝 webpack-dev-server
npm install --save-dev webpack-dev-server
修改webpack.config.js罩旋，添加devServer配置：
const path = require('path');
module.exports = {
...
devServer: {
contentBase: 'some/path', // 可訪問(wèn)文件的路徑啊央，告訴服務(wù)器從哪里提供內(nèi)容
port: 9000 // 端口號(hào)
}
...
}
在npm script腳本中添加命令：
"start": "webpack-dev-server --open", // open參數(shù)可以讓服務(wù)器在啟動(dòng)時(shí)打開(kāi)瀏覽器
運(yùn)行 npm run start命令，就會(huì)看到瀏覽器自動(dòng)跳轉(zhuǎn)到http://localhost:9000/涨醋，修改源文件會(huì)讓瀏覽器重新刷新瓜饥。
3. webpack-dev-middleware
webpack-dev-middleware是一個(gè)與webpack的compiler綁定的中間件，可以在express服務(wù)中使用浴骂。
它通過(guò)watch mode以實(shí)現(xiàn)對(duì)變更文件的監(jiān)控乓土，然后自動(dòng)打包編譯進(jìn)內(nèi)存中，減少打包進(jìn)本地磁盤的時(shí)間溯警。webpack-dev-server在內(nèi)部使用了它趣苏。
安裝
npm install --save-dev express webpack-dev-middleware
修改webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin= require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
1: './src/index1.js',
2: './src/index2.js'
},
plugins: [
new CleanWebpackPlugin(),
new ExtractTextPlugin('[name].css'), // 每個(gè)入口 chunk 都生成一個(gè)對(duì)應(yīng)的文件
new HtmlWebpackPlugin({
title: 'Webpack Test'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
+ publicPath: '/'
}，
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}]
}
};
設(shè)置自定義的 express 服務(wù)：
webpack-test
|- package.json
|- webpack.config.js
+ |- server.js
|- dist
|- index.html
|- src
|- index1.js
|- index2.js
|- node_modules
server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.listen(3000, function () {
console.log('listening on port 3000');
});
為了看到頁(yè)面效果梯轻，修改index1.js：
function write() {
document.write('hello webpack-dev-middleware');
}
write();
修改package.json食磕，在script腳本中添加命令：
"server": "node server.js",
運(yùn)行 npm run server，構(gòu)建成功后喳挑，在瀏覽器中打開(kāi)http://localhost:3000彬伦，就會(huì)看到頁(yè)面。修改源文件伊诵，然后刷新瀏覽器单绑，就會(huì)看到修改后的結(jié)果。
