Question

尝试将webpack-dev-server配置为可在以前配置了webpack而不使用dev-server的现有项目上使用。我将此添加到我的webpack配置中：

我这样创建了一个webpack.dev.config.js文件：

const path = require('path');
const config = require('./webpack.config');
const Webpack = require('webpack');

config.devServer = {
  contentBase: path.join(__dirname, 'public'),
  disableHostCheck: true,
  historyApiFallback: true,
  host: '0.0.0.0',
  hot: true,
  port: process.env.PORT || 7031,
  publicPath: '/',
  watchOptions: {
    poll: true,
    ignored: /node_modules/,
  },
};

config.plugins.push(new Webpack.NamedModulesPlugin(), new Webpack.HotModuleReplacementPlugin());

module.exports = config;

通过package.json中的此npm命令执行：

webpack-dev-server --watch-poll --inline --config webpack.dev.config.js --colors --progress -d

正在使用的webpack软件包：

    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.5.0"

webpack.config.js：

const autoprefixer = require('autoprefixer');
const precss = require('precss');
const shell = require('child_process').exec;
const path = require('path');
const Webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const target = process.env.TARGET || 'dev';
process.env.TARGET = target;
console.info(`Building for target [${target}]`);

const javascriptPath = path.resolve('./src/javascripts')

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        include: javascriptPath,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'react', 'stage-0'],
            },
          },
        ],
      },
      {
        test: /\.js$/,
        include: javascriptPath,
        use: [
          {
           loader: 'babel-loader',
            options: {
              presets: ['es2015', 'react', 'stage-0'],
            },
          },
        ],
      },
      {
        test: /\.coffee$/,
        include: javascriptPath,
        use: [
          {
            loader: 'coffee-loader',
          },
        ],
      },
      {
        test: /\.s(a|c)ss$/,
        include: path.resolve('./src'),
        use: [
          {
            loader: 'style-loader',
            options: {
              singleton: true,
            },
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer'),
                require('precss'),
              ],
            },
          },
          {
            loader: 'resolve-url-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              singleton: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer'),
                require('precss'),
              ],
            },
          },
        ],
      },
      {
        test: /\.(ico|png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'images/img-[hash:6].[ext]',
            },
          },
        ],
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'svg-inline-loader',
          },
        ],
      },
      {
        test: /\.json$/,
        use: [
          {
            loader: 'json-loader',
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'raw-loader',
          },
        ],
      },
    /*
      {
        test: /index\.hamlc$/,
        use: [
          {
            loader: 'haml-loader',
            options: {
              target: target + '!' + path.resolve('./src/views/index.hamlc'),
              filename: path.resolve('./public/index.html'),
            },
          },
        ],
      },
    */
    ],
  },
  entry: {
    'configuration': './build_data/config.js',
    'application': './src/javascripts/index.js.coffee',
    'settings/client': './src/javascripts/settings_client.js',
  },
  output: {
    path: path.resolve('./public/dist'),
    filename: '[name]-[hash:6].js'
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.scss'],
    alias: {
      images: './public/images',
    },
  },
  plugins: [
    new CleanWebpackPlugin(['public/dist', 'public/index.html'], {
      root: path.resolve('.'),
      verbose: true,
      dry: false
    }),
    new HtmlWebpackPlugin({
      template: 'haml-loader?target=' + target +
        '!' + path.resolve('./src/views/index.hamlc'),
      filename: path.resolve('./public/index.html'),
    }),
    new Webpack.EnvironmentPlugin(['TARGET']),
    new Webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production'),
      },
    }),
  ],
};

当我运行webpack时，我得到了（输出的上半部分）：

File build_data/config.js created
Building for target [dev]
clean-webpack-plugin: /Users/xxxxx/src/xxxxxx/xxxxxxx/public/dist has been removed.
clean-webpack-plugin: /Users/xxxxx/src/xxxxxx/xxxxxxx/public/index.html has been removed.
 10% building modules 3/3 modules 0 active                                  Project is running at http://0.0.0.0:7031/
webpack output is served from /
Content not from webpack is served from /Users/xxxxx/src/xxxxxx/xxxxxxx/public
404s will fallback to /index.html
Hash: e26133d6d376997a1da1                                                  r Version: webpack 3.12.0
Time: 28385ms
                                                  Asset     Size  Chunks                    Chunk Names
./images/loading.gif?h=de93ac1f9c3e69e58a5e877e73f1e9e2   3.7 MB          [emitted]  [big]
                                  application-e26133.js  23.1 MB       0  [emitted]  [big]  application
                              settings/client-e26133.js   912 kB       1  [emitted]  [big]  settings/client
                                configuration-e26133.js   912 kB       2  [emitted]  [big]  configuration
                                          ../index.html  10.2 kB          [emitted]

尽管它说Project is running at http://0.0.0.0:7031/，但您只能通过http://127.0.0.1:7031/webpack-dev-server来

我需要它以http://127.0.0.1:7031/作为其根，而不是添加的/webpack-dev-server，而且我不确定是什么原因导致了这种情况。

任何帮助将不胜感激

Answer 1

我可能已经解决了我的问题...

在 webpack.config.js 中，我执行了以下操作：

将此行添加到顶部：

const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');

编辑输出并添加 publicPath ：

   output: {
     path: path.resolve('./public/dist'),
     filename: '[name]-[hash:6].js',
     publicPath: '/'

然后通过添加Html-webpack-harddisk-plugin编辑插件：

    new HtmlWebpackPlugin({
      alwaysWriteToDisk: true,
      template: 'haml-loader?target=' + target +
        '!' + path.resolve('./src/views/index.hamlc'),
      filename: path.resolve('./public/index.html'),
    }),
    new HtmlWebpackHarddiskPlugin(),

已添加到 package.json ：

"html-webpack-harddisk-plugin": "^1.0.1",

到目前为止，该行为可以按预期进行...我需要进行更多测试，以确保一切都是开发所需要的方式。

当publicPath：'/'时，Webpack-dev-server使用“ webpack-dev-server”作为路径

1 个答案: