Answer the question
In order to leave comments, you need to log in
Why is ExtractTextPlugin not working when running webpack-dev-server?
Good evening. In my project I use less, which is built using webpack. In particular, I collect less files using ExtractTextPlugin, which in turn generates css. If I just type the command: webpack in the terminal, then everything is assembled without errors, including css. But typing webpack all the time is inconvenient, and there is a dev-server for automatic rebuilding of the project, in particular, the command is written in the package.json file in the scripts object
"start": "webpack-dev-server --progress --inline --hot",
"dev": "SET NODE_ENV=development && npm run start",
npm run dev
, apparently ExtractTextPlugin does not work, respectively, less is not processed. Who faced such a problem, tell me, please, how can I fix it? {
"name": "react_course_01_07",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress --inline --hot",
"dev": "SET NODE_ENV=development && npm run start",
"prod": "SET NODE_ENV=production && webpack",
"lint": "eslint ./src",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"autoprefixer-loader": "3.2.0",
"babel-core": "^6.13.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"eslint": "^3.3.0",
"eslint-plugin-react": "^6.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"react-hot-loader": "^1.3.0",
"redux-thunk": "^2.2.0",
"style-loader": "0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"classnames": "^2.2.5",
"lodash": "^4.15.0",
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "2.6.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0"
}
}
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/dev-server',
'./src/app.js',
'./src/styles/app'
],
output: {
publicPath: 'http://localhost:3000/',
path: __dirname + '/public',
filename: 'bundle.js'
},
watch: NODE_ENV == 'development',
watchOptions: {
aggregateTimeout: 100
},
devtool: NODE_ENV == 'development' ? 'cheap-inline-module-source-map' : null,
plugins: [
new ExtractTextPlugin('app.css'),
new webpack.HotModuleReplacementPlugin(),
//new ExtractTextPlugin('bundle.css'),
new webpack.DefinePlugin({
NODE_ENV: JSON.stringify(NODE_ENV)
}),
new webpack.NoErrorsPlugin()
],
resolve: {
modulesDirectories: ['node_modules'],
moduleTemplates: ['*', 'index'],
extensions: ['', '.js', '.less'],
root: __dirname + '/src'
},
resolveLoader: {
modulesDirectories: ['node_modules'],
moduleTemplates: ['*-loader', '*'],
extensions: ['', '.js']
},
devServer: {
host: 'localhost',
port: 3000,
contentBase: __dirname + '/public',
inline: true,
hot: true,
historyApiFallback: true
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader'],
include: [
path.resolve(__dirname, 'src')
],
plugins: ['transform-runtime']
},
//{
// test: /\.less$/,
// loader: 'style' +
// '!css?sourceMap' +
// '!autoprefixer-loader?browsers=last 2 version' +
// '!less?sourceMap=source-map-less-inline'
//},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
},
{
test: /\.(png|jpg|svg|gif)$/,
loader: 'file?name=img/[path][name].[ext]'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file?name=fonts/[name].[ext]'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]'
}
]
}
};
if (NODE_ENV == 'production') {
console.log('WTF');
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
unsafe: true
}
})
);
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question