Question

我设法使用webpack压缩/编译我的js和scss文件。 scss文件被'extract-text-webpack-plugin'提取到外部css文件中。这是代码：

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
require('es6-promise').polyfill();

module.exports = {
  entry: ['./js/app'],
  output: {
   path: path.join(__dirname, 'js'),
   publicPath: 'js',
   filename: 'app.min.js'
  },
 plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compressor: {
     warnings: false,
    },
  }),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new ExtractTextPlugin("../css/styles.min.css", {allChunks: false})
 ],
 module: {
  loaders: [{
   test: /\.scss$/,
   loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
  }]
 }
}

当我现在运行“ webpack-dev-server js / app.js ”时 - 它会在js文件中获取我的更改（例如警告），但不会在css文件中注释更改

这是app.js：

var $ = require('jquery');
require('../css/styles.scss');

alert('Hi');

我猜这个问题与ExtractTextPlugin有关。然后我再也不知道如何解决方法。任何提示或想法？

Answer 1

好的，我明白了。在启动webpack-dev-server时，我只是问我们是否处于生产环境中：

const live = process.env.NODE_ENV === "production";

if(live) {
 ...
} else {
 ...
}

如果我们不在制作中，它会错过ExtractTextPlugin。

最后，为了部署我的更改，我输入：

NODE_ENV=production webpack -p

也可以使用npm脚本来缩短它。

webpack dev服务器忽略scss更改

1 个答案: