Here is my webpack config:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
index: [
"webpack-dev-server/client?http://localhost:8081",
"./components/index.js"
]
},
output: {
filename: './build/dist.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract(
{
fallback: "style-loader",
use: {
loader: "css-loader",
options: {
modules: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]"
}
},
}
)
}
]
},
plugins: [new ExtractTextPlugin("./build/dist.css", {allChunks: true})]
};
And webpack complied successfully
But I can not find the dist.css file, nor I can find it in Everything software searching result.
The only weird thing before this is that webpack error says can not find module of Extract Text Plugin, but after I install it with npm install locally, it is solved.
The other parts of webpack works fine, even now, when I modify js and it will livereload to present page with right js file as it should be.
Thanks if anyone can help me.
webpack-dev-server
saves files in memery.
You can add another script in package.json
without webpack-dev-server
.
"scripts": {
"build-dev": "webpack --config ./dev.webpack.js"
}
And don't use entry like this webpack-dev-server/client?http://localhost:8081
. Use object property. https://webpack.js.org/configuration/dev-server/