the webpack I configured reported an error when using css-loader. Preprocessing like less is a mistake like this.
webpack is configured as follows.
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
function resolve(dir) {
return path.join(__dirname, "../", dir);
}
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "../dist")
},
resolve: {
extensions: [".json", ".jsx", ".js"],
alias: {
"@": resolve("src")
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: [ "style-loader", "css-loader" ]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: "url-loader"
},
{
test: /\.(jpg|jpeg|png|gif)$/,
loader: "url-loader",
query: {
limit: 10000
}
},
{
test: /\.html$/,
loader: "html-loader"
},
{
exclude: [/\.js$/, /\.html$/, /\.styl$/, /\.json$/],
loader: "file-loader",
options: {
name: "static/[name].[hash:8].[ext]"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "src/index.html",
inejct: true
})
]
};