this is the source code for the configuration:
const path = require("path")
const webpack = require("webpack")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const pages = require("../config/pages.config.js")
const merge = require("webpack-merge")
const prodConfig = require("./webpack.prod")
const devConfig = require("./webpack.dev")
const commonConfig = env => {
// css
const ExtractTextSass = new ExtractTextPlugin({
filename: "static/css/[name].[hash].css"
})
// loader
// js laoder
const scriptLoader = [
{
loader: "babel-loader"
}
].concat(env === "prod"
? []
: [{
loader: "eslint-loader",
options: {
formatter: require("eslint-friendly-formatter")
}
}]
)
const cssLoaders = [
{
loader: "style-loader",
options: {
sourceMap: env === "dev"
}
},
{
loader: "postcss-loader",
options: {
sourceMap: env === "dev",
ident: "postcss",
plugins: [
require("postcss-cssnext")()
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: env === "dev"
}
}
]
// css loader
const styleLoader = env === "prod"
? ExtractTextSass.extract({
fallback: "style-loader",
use: cssLoaders.slice(1) // loader style-loader use styleloader slice
})
: [].concat(cssLoaders)
// file-loader
const fileLoaders = env === "dev"
? [{
loader: "file-loader",
options: {
outputPath: "static/images/",
limit: 5000
}
}]
: [{
loader: "url-loader",
options: {
outputPath: "static/images/",
limit: 5000
}
}]
return {
entry: pages.entries(),
output: {
filename: "static/js/[name].[hash].js",
path: path.resolve(__dirname, "../dist"), //
chunkFilename: "[name][hash:5].chunk.js",
publicPath: "/" // cdn
},
plugins: [
...pages.htmlPlugin(),
ExtractTextSass,
new CleanWebpackPlugin(["dist"], {
root: path.resolve(__dirname, "../")
}),
new webpack.ProvidePlugin({
//
// :
// $ : "jquery"
// webpack "jquery" jquery
// $(...) jquery
$: "jquery"
})
],
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: fileLoaders.concat(env === "prod"
? [{
loader: "img-loader",
options: {
pngquant: {
quality: 80
}
}
}]
: []
)
},
{
test: /\.(eot|woff|woff2|ttf|svg)$/,
use: fileLoaders
},
{
test: /\.scss$/,
use: styleLoader
},
{
test: /\.js$/,
use: scriptLoader,
exclude: /node_modules/
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
attr: ["img:src"]
}
}
]
}
]
},
resolve: {
extensions: [".js", ".json", ".css"],
alias: {
//
"style": path.resolve(__dirname, "../src/style"),
"module": path.resolve(__dirname, "../src/module")
//
// "jquery.min$": path.resolve(__dirname, "../src/module/libs")
}
}
}
}
module.exports = env => {
let config = env === "prod"
? prodConfig
: devConfig
return merge(commonConfig(env), config)
}
I don"t know if there is any mistake or omission according to the tutorials of Mu course net