如何阻止Webpack在每次保存时输出新的CSS文件?
我使用Webpack生成JavaScript,还使用一系列加载程序[SASS加载程序,POSTSS加载程序,CSS加载程序]生成CSS(来自SASS) 当我在开发的时候,我在watch模式下运行Webpack如何阻止Webpack在每次保存时输出新的CSS文件?,webpack,sass,postcss,css-loader,sass-loader,Webpack,Sass,Postcss,Css Loader,Sass Loader,我使用Webpack生成JavaScript,还使用一系列加载程序[SASS加载程序,POSTSS加载程序,CSS加载程序]生成CSS(来自SASS) 当我在开发的时候,我在watch模式下运行WebpackWebpack--progress--watch,我注意到每次我保存一个JavaScript文件时,Webpack都会输出全新的CSS文件 虽然这并没有给我带来任何问题,但这似乎不是很有效,我想知道我的配置设置是否不正确,或者这就是Webpack的工作方式?有没有办法阻止它这样做 下面是我的
Webpack--progress--watch
,我注意到每次我保存一个JavaScript文件时,Webpack都会输出全新的CSS文件
虽然这并没有给我带来任何问题,但这似乎不是很有效,我想知道我的配置设置是否不正确,或者这就是Webpack的工作方式?有没有办法阻止它这样做
下面是我的网页配置,你可以看到我在运行什么
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const preCSSPlugin = require('precss');
const autoprefixer = require('autoprefixer');
const isProduction = (process.env.NODE_ENV === 'production');
module.exports = {
entry: {
/*
Sitewide assets
*/
// Javascript
'build/js/main.js': './static-src/js/',
// CSS
'build/css/main.css': './static-src/sass/main.scss',
},
devtool: isProduction ? 'cheap-source-map' : 'eval',
output: {
filename: '[name]',
path: path.resolve(__dirname, 'build/'), // Output to the `build` directory.
},
module: {
rules: [
// SASS
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
// CSS
// https://github.com/webpack-contrib/css-loader
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
},
},
// Post CSS loader lets us use Autoprefixer for the CSS
// https://github.com/postcss/postcss-loader
{
loader: 'postcss-loader',
options: {
sourceMap: 'inline',
plugins: () => [
preCSSPlugin,
autoprefixer, // Autoprefixer loads the browserlist from package.json
],
},
},
// SASS loader
// https://github.com/webpack-contrib/sass-loader
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
},
},
],
}),
},
// JS (Babel) - Loads options from .babelrc
// https://github.com/babel/babel-loader
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
// Output CSS from SASS
new ExtractTextPlugin({
filename: '[name]',
disable: false,
allChunks: true,
}),
// Output common chunk JS
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
// (the commons chunk name)
filename: 'build/common.js',
// (the filename of the commons chunk)
minChunks: 3,
// (Modules must be shared between 3 entries)
}),
],
};
您使用
main.scss
作为入口点的原因是什么?是的,此设置用于CMS网站,而不是单个应用程序。我需要有能力构建样式,而不考虑javascript。您为什么使用main.scss
作为入口点?是的,此设置用于CMS网站,而不是单个应用程序。我需要有能力建立的风格,无论javascript。