我设法使用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有关。然后我再也不知道如何解决方法。任何提示或想法?
答案 0 :(得分:0)
好的,我明白了。在启动webpack-dev-server时,我只是问我们是否处于生产环境中:
const live = process.env.NODE_ENV === "production";
if(live) {
...
} else {
...
}
如果我们不在制作中,它会错过ExtractTextPlugin。
最后,为了部署我的更改,我输入:
NODE_ENV=production webpack -p
也可以使用npm脚本来缩短它。