-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
128 lines (118 loc) · 3.45 KB
/
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
const fs = require("fs");
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var webpack = require("webpack");
let pages = [];
// 需要忽略的資料夾
let pageIgnore = ["try"];
// 搜尋目錄中檔案並 gen HtmlWebPackPlugin
function generateHtmlPlugins(templateDir) {
// Read files in template directory
const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
const extensionName = "pug";
templateFiles.forEach(item => {
// Split names and extension
const parts = item.split(".");
const name = parts[0] || undefined;
const extension = parts[1] || undefined;
// 忽略沒檔名且第一個字為底線的
let checkName = name !== undefined && name.substr(0, 1) !== "_";
// 忽略 pageIgnore 內的資料夾及資料夾名第一次為底線的
let checkDirectoryName =
extension === undefined &&
pageIgnore.indexOf(name) === -1 &&
name.substr(0, 1) !== "_";
if (checkDirectoryName) {
var newTemplateDir = templateDir + "/" + name;
generateHtmlPlugins(newTemplateDir);
}
// Create new HtmlWebPackPlugin with options
if (name !== undefined && checkName && extension === extensionName) {
pages.push(
new HtmlWebPackPlugin({
filename: `${name}.html`,
template: path.resolve(
__dirname,
`${templateDir}/${name}.${extension}`
)
})
);
}
});
return pages;
}
// pug 全域變數
// let globalJsonData = require(path.resolve(__dirname, "src/define.json"));
// Call our function on our views directory.
const htmlPlugins = generateHtmlPlugins("./mockup") || [];
let config = {
entry: ["./src/main.js", "./src/main.scss"],
output: {
path: __dirname + "/dist"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.pug$/,
use: "pug-loader?pretty=true&self=true"
},
{
// css / sass / scss loader for webpack
test: /\.(css|sass|scss)$/,
use: ExtractTextPlugin.extract({
use: ["css-loader", "sass-loader"]
})
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fonts/"
}
}
]
}
]
},
plugins: [
new CopyWebpackPlugin([]),
new ExtractTextPlugin({
filename: "[name].bundle.css"
}),
new webpack.ProvidePlugin({
// 利用 webpack.ProvidePlugin 讓 $ 和 jQuery 可以連結到 jquery library
$: "jquery",
jQuery: "jquery",
"window.jquery": "jquery"
}),
new CleanWebpackPlugin({}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
].concat(htmlPlugins),
devServer: {
inline: true,
contentBase: "./dist",
port: 3000
}
};
module.exports = config;