在cli上运行webpack --watch
之后,所有文件都会编译好,一切都很好!但是在更新webpack之后,它不会在js文件被更改时触发监视,并且仅为css导出并导出。
我的webpack配置:
var ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path'),
webpack = require('webpack');
module.exports = {
entry: [
'./client.js',
'./client/styles/main.scss'
],
output: {
path: './build',
publicPath: '/public/js/',
filename: '[name].js'
},
resolve: {
extensions: ['', '.js'],
alias: {
'styles': __dirname + '/client/styles',
'components': __dirname + '/client/scripts/components',
'actions': __dirname + '/client/scripts/actions',
'stores': __dirname + '/client/scripts/stores',
'constants': __dirname + '/client/scripts/constants',
'mixins': __dirname + '/client/scripts/mixins',
'configs': __dirname + '/client/scripts/configs',
'icon': 'react-fa'
}
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') },
{ test: /\.json$/, loader: 'json-loader'},
{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=8192' },
{ test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader',
'css!sass?outputStyle=expanded&' +
"includePaths[]=" +
(path.resolve(__dirname, "./node_modules"))
)
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
}),
new ExtractTextPlugin("[name].css", {allChunks: true}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.OldWatchingPlugin()
],
stats: {
colors: true,
reasons: true
},
devtool: 'source-map',
watch: true,
keepalive: true,
debug: true,
cache: true,
};
我的输出:
Version: webpack 1.9.6
Time: 4153ms
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
main.js 1.11 MB 0 [emitted] main
main.css 164 kB 0 [emitted] main
main.js.map 1.31 MB 0 [emitted] main
main.css.map 85 bytes 0 [emitted] main
[0] multi main 40 bytes {0} [built]
+ 249 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
+ 7 hidden modules
JS更改时不会创建其他输出。 .....
file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_pagination.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_nav-divider.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_border-radius.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_gradients.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_center-block.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid.scss' }
改变CSS后。
答案 0 :(得分:0)
JS加载程序的配置与其他加载程序不同;如果你改变
它会起作用吗?{ test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') }
到
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }