Question

我使用webpack-dev-server构建简单的webpack。这是工作，当我改变.js文件其autorefreshingin浏览器。但是当我改变时，没有任何事情发生。这是我的webpack.confing

const { resolve } = require('path');

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

const config = {
  devtool: 'cheap-module-eval-source-map',

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './main.js',
    './assets/sass/main.sass',
  ],

  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  context: resolve(__dirname, 'app'),

  devServer: {
    hot: true,
    contentBase: resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: [
          'babel-loader',
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.sass$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'sass-loader',
              query: {
                sourceMap: false,
              },
            },
          ],
        }),
      },
      { test: /\.(png|jpg)$/, use: 'url-loader?limit=15000' },
      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ]
  },

  plugins: [
    new ExtractTextPlugin({ filename: 'style.css', disable: false, allChunks: true }),
    new CopyWebpackPlugin([{ from: 'vendors', to: 'vendors' }]),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' }),
    new webpack.HotModuleReplacementPlugin(),
  ],
};

module.exports = config;

另外，请告诉我如何在构建期间使文件进入正确的文件夹（.css到dist / css，js到dist / js），'cuz rigth现在它们都转到dest文件夹的根目录。

Answer 1

热重新加载不适用于extract-text-webpack-plugin。您不应该在开发中使用它，并且可以通过在开发中将disable选项设置为true来轻松禁用它。您可以使用如下环境变量：

new ExtractTextPlugin({
  filename: 'style.css',
  disable: process.env.NODE_ENV !== 'production',
  allChunks: true
}),

这只会在生产模式下提取CSS，因此您需要使用以下命令运行生产版本：

NODE_ENV=production webpack [options]

或者如果你在Windows上：

set NODE_ENV=production && webpack [options]

如果您寻找跨平台解决方案，还有cross-env。

要将JavaScript文件转换为dist/js并将CSS文件转换为dist/css，您可以将output.path设置为dist/js，然后告诉extract-text-webpack-plugin生成文件进入../css/style.css。

output: {
  filename: 'bundle.js',
  path: resolve(__dirname, 'dist/js'),
  publicPath: '/',
},
plugins: [
  new ExtractTextPlugin({
    filename: '../css/style.css',
    disable: process.env.NODE_ENV !== 'production',
    allChunks: true
  }),
  // other plugins
]

更改sass时热重新启动webpac-dev-server

1 个答案: