// webpack config file export module.exports = { mode: "development", devServer: { liveReload: true, }, };// webpack config file export module.exports = { mode: "development", devServer: { liveReload: false, hot: true, }, plugins: [new webpack.HotModuleReplacementPlugin()], };- js:
- css:
- sass:
- SASS Loader with SASS
- images:
babel-loader:
{ test: /\.js$/i, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], }, } }css-loader:
{ test: /\.css$/i, use: [ "style-loader", // for production { loader: MiniCssExtractPlugin.loader } { loader: "css-loader", options: { sourceMap: true } }, { loader: "postcss-loader", options: { postcssOptions: { plugins: { "postcss-import": {}, "postcss-preset-env": { browsers: ["last 1 version"], // for production change this stage: 0 } } }, sourceMap: true } } ] }sass-loader:
{ test: /\.s[ac]ss$/i, use: [ "style-loader", // for production { loader: MiniCssExtractPlugin.loader } { loader: "css-loader", options: { sourceMap: true } }, { loader: "postcss-loader", options: { postcssOptions: { plugins: { "postcss-import": {}, "postcss-preset-env": { browsers: ["last 1 version"], stage: 0 } } }, sourceMap: true } }, { loader: "sass-loader", options: { sourceMap: true, implementation: require("sass") } } ] }file-loader:
{ test: /\.(png|jpe?g|gif)$/i, use: { loader: "file-loader", options: { publicPath: path.resolve(__dirname, "../dist/static/"), outputPath: "images" } } }url-loader:
{ test: /\.svg$/i, use: { loader: "url-loader" } }HtmlWebpackPlugin:
new HtmlWebpackPlugin({ template: path.resolve(__dirname, "../public/index.html"), favicon: path.resolve(__dirname, "../public/favicon.ico"), });MiniCssExtractPlugin:
new MiniCssExtractPlugin({ filename: path.join("static", "css", "[name].[contenthash].css"), });