-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.dev.js
134 lines (133 loc) · 4.42 KB
/
webpack.dev.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
129
130
131
132
133
134
const path = require("path");
const webpack = require("webpack");
const postcssFlexbugsFixes = require("postcss-flexbugs-fixes");
const postcssPresetEnv = require("postcss-preset-env");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
// The build folder.
path: path.resolve(__dirname, "dist"),
// Use "/" in development for homepage.
publicPath: "/",
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: "static/js/bundle.js",
// There are also additional JS chunk files if you use code splitting.
chunkFilename: "static/js/[name].chunk.js"
},
// devtool
devtool: "eval-source-map",
devServer: {
contentBase: path.resolve(__dirname, "dist"),
hot: true
},
module: {
// Makes missing exports an error instead of warning.
// https://webpack.js.org/configuration/module/
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// eslint-loader
{
enforce: "pre",
test: /\.(js|mjs|jsx)$/,
exclude: /node_modules/,
use: ["eslint-loader"]
},
// babel-loader
{
test: /\.(js|mjs|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
// url-loader
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
use: [
{
loader: "url-loader",
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]"
}
}
]
},
// file-loader
{
test: /\.svg$/,
use: ["@svgr/webpack", "url-loader"]
},
// css-loader
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: [
"style-loader", // development only
{ loader: "css-loader", options: { importLoaders: 1 } },
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: () => [
postcssFlexbugsFixes,
postcssPresetEnv({
autoprefixer: {
flexbox: "no-2009"
},
stage: 3
})
]
}
}
],
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true
},
// sass-loader
{
test: /\.(scss|sass)$/,
exclude: /\.module\.(scss|sass)$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
],
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true
}
]
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: "./src/index.html"
}),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: "asset-manifest.json",
publicPath: "/"
})
]
};