解決的問題
1：多頁面結構如何設置，2：公共樣式如何配置，3：入口文件都需要導入哪些樣式 ，4：如何自動配置入口文件而不需要手動書寫。
首先看下項目目錄
該項目有兩個頁面，分別位於index和login文件夾下，
common.css爲公共樣式
實現的主要功能：
1：通過AutoWebPlugin提取公共代碼
2：通過AutoWebPlugin自動設置入口文件，再新添加文件也不用再寫入口文件。
3：多個頁面共用一個模板
4：通過AutoWebPlugin配置頁面所需的公共文件
webpack.config.js文件
const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const { AutoWebPlugin } = require('web-webpack-plugin');
// 使用本文的主角 AutoWebPlugin，自動尋找 pages 目錄下的所有目錄，把每一個目錄看成一個單頁應用
const autoWebPlugin = new AutoWebPlugin('pages', {
template: './template.html', // HTML 模版文件所在的文件路徑
postEntrys: ['./common.css'],// 所有頁面都依賴這份通用的 CSS 樣式文件
// 提取出所有頁面公共的代碼
commonsChunk: {
name: 'common',// 提取出公共代碼 Chunk 的名稱
},
});
module.exports = {
// AutoWebPlugin 尋找到的所有單頁應用，生成對應的入口配置，
// autoWebPlugin.entry 方法可以獲取到生成入口配置
// 這裏就相當於entry: {
// "index": ['./pages/index/index.js','./common.css'], 由此可以看出chunk就是文件夾的名字
// "login": ['./pages/login/index.js','./common.css']
// }
entry: autoWebPlugin.entry({
// 這裏可以加入你額外需要的 Chunk 入口
}),
output: {
filename: '[name]_[chunkhash:8].js',// 給輸出的文件名稱加上 hash 值
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
// 排除 node_modules 目錄下的文件，node_modules 目錄下的文件都是採用的 ES5 語法，沒必要再通過 Babel 去轉換
exclude: path.resolve(__dirname, 'node_modules'),
},
{
test: /\.css/,// 增加對 CSS 文件的支持
// 提取出 Chunk 中的 CSS 代碼到單獨的文件中
use: ExtractTextPlugin.extract({
use: ['css-loader?minimize'] // 壓縮 CSS 代碼
}),
},
]
},
plugins: [
autoWebPlugin,
new ExtractTextPlugin({
filename: `[name]_[contenthash:8].css`,// 給輸出的 CSS 文件名稱加上 hash 值
}),
new DefinePlugin({
// 定義 NODE_ENV 環境變量爲 production 去除 react 代碼中的開發時才需要的部分
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
// 壓縮輸出的 JS 代碼
new UglifyJsPlugin({
// 最緊湊的輸出
beautify: false,
// 刪除所有的註釋
comments: false,
compress: {
// 在UglifyJs刪除沒有用到的代碼時不輸出警告
warnings: false,
// 刪除所有的 `console` 語句，可以兼容ie瀏覽器
drop_console: true,
// 內嵌定義了但是只用到一次的變量
collapse_vars: true,
// 提取出出現多次但是沒有定義成變量去引用的靜態值
reduce_vars: true,
}
}),
],
};
再看一下index.js入口文件
import React, { Component } from 'react';
import { render } from 'react-dom';
//只需導入自己所需樣式，公共樣式通過autoWebPlugin配置，不需導入
import './index.css';
class App extends Component {
render() {
return <h1>Page Index</h1>
}
}
render(<App/>, window.document.getElementById('app'));
最後看下模板
<html>
<head>
<meta charset="UTF-8">
<!--該頁面所依賴的其它剩下的 CSS 注入的地方-->
<!--STYLE-->
<!--注入 google_analytics 中的 JS 代碼-->
<script src="./google_analytics.js?_inline"></script>
<!--異步加載 Disqus 評論-->
<script src="https://dive-into-webpack.disqus.com/embed.js" async></script>
</head>
<body>
<div id="app"></div>
<!--該頁面所依賴的其它剩下的 JavaScript 注入的地方-->
<!--SCRIPT-->
<!--Disqus 評論容器-->
<div id="disqus_thread"></div>
</body>
</html>
因爲模板是共用的的所以，不能向單頁面指定css和js的文件名了，因爲不同入口文件，生成的名稱都不一樣，所以這裏用 style 和 javascript 標記需導入的位置即可。