| app
| css
| styles.css
| js
| index.js
| templates
| index.pug
| build
Конфиг:const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const devserver = require("./webpack/devserver");
const env = process.env.NODE_ENV || "development";
const PATHS = {
app: path.join(__dirname, "app"),
build: path.join(__dirname, "build")
};
const config = {
entry: PATHS.app + "/js/index.js",
output: {
path: PATHS.build,
filename: "js/[name].js"
},
module: {
rules: [
{
test: /\.pug$/,
loader: "pug-loader",
options: {
pretty: true
}
},
{
test: /\.js$/,
exclude: [/node_modules/],
use: [{
loader:"babel-loader",
options: { presets: ["es2015"] }
}]
}
]
},
devtool: env === "development" ? "inline-source-map" : "",
plugins: [
new webpack.DefinePlugin({
NODE_ENV: JSON.stringify(env)
}),
new HtmlWebpackPlugin({
filename: "index.html",
chunks: ["index", "common"],
template: PATHS.app + "/templates/index.pug"
}),
new webpack.optimize.CommonsChunkPlugin({
name: "common"
}),
]
};
if (env === "production") {
config.module.rules.push({
test: /\.css$/,
use: ExtractTextPlugin.extract({
publicPath: "./build",
fallback: "style-loader",
use: [
{
loader: "css-loader",
query: {
modules: true,
importLoaders: 1,
sourceMap: true
}
},
{ loader: "postcss-loader" }
],
}),
});
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new ExtractTextPlugin({
filename: "./css/[name].css",
allChunks: true
})
);
}
else {
config.module.rules.push({
test: /\.css$/,
use: [
"style-loader",
"css-loader",
"postcss-loader"
]
});
config.devServer = {
stats: "errors-only",
port: 9000
};
}
module.exports = config;
В результате получаю html файл без стилей и без подключенного main.js файла:
| build
| | css
| | main.css
| | js
| | common.js
| | main.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>App</title>
</head>
<body>
<h1>New App</h1>
<script type="text/javascript" src="js/common.js"></script></body>
</html>
Простой
