Question

具有babel，css-loader和style-loader + extract-text-webpack-plugin的构建。再加上引导程序和jQuery。

与gulp'e上的浏览器同步一样，对jquery的更改进行计数和更改，但在连接某些模块之前一切正常，但web不能跟踪html中的更改。我可能在某个地方犯了错误，还是需要另一个模块？如果需要更多文件，我将把package.json和webpack.config.js附加到剧透中。

费用

"name": "lesson_boots",
              "version": "1.0.0",
              "description": "",
              "main": "index.js",
                "scripts": {
                "dev": "webpack-dev-server --mode development --open",
              "build": "webpack --mode production"
             },
              "author": "",
             "license": "ISC",
               "devDependencies": {
                  "babel-core": "^6.26.3",
                 "babel-loader": "^7.1.5",
                "babel-preset-env": "^1.7.0",
                "babel-preset-stage-3": "^6.24.1",
                "css-loader": "^1.0.1",
                  "extract-text-webpack-plugin": "^4.0.0-beta.0",
              "path": "^0.12.7",
               "style-loader": "^0.23.1",
             "webpack": "^4.26.1",
             "webpack-cli": "^3.1.2",
           "webpack-dev-server": "^3.1.10"
          },
          "dependencies": {
         "bootstrap": "^4.1.3",
         "jquery": "^3.3.1"
      }
 }

webpack.config.js

let path = require('path')
    const ExtractTextPlugin = require("extract-text-webpack-plugin");

   let conf = {
      entry: './src/index.js',
       output: {
         path: path.resolve(__dirname, './dist'),
         filename: 'main.js',
          publicPath: 'dist/'
           },
         devServer: {
        overlay: true
         },
          module: {
           rules: [
             {
               test: /\.js$/,
                 loader: 'babel-loader',
               },
              {
                 test: /\.css$/,
              use: ExtractTextPlugin.extract({
                 use: "css-loader"
               })
             }
           ]
       },
         plugins: [
           new ExtractTextPlugin("styles.css"),
          ]
 };

   module.exports = (env, options) => {
    let production = options.mode === 'production';

    conf.devtool = production
       ? false
        : 'eval-sourcemap';

      return conf;
   }

Answer 1

对于开发环境，您可以按照以下说明简单地调整webpack.config.js规则。

rules: [
             {
               test: /\.js$/,
                 loader: 'babel-loader',
               },
               {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                }
           ]

可以在生产环境中进行以下更改。

请安装 mini-css-extract-plugin 并将其导入webpack.config.js文件。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

并在webpack.config.js文件的rules数组中更新如下所述的规则。

  rules: [
         {
           test: /\.js$/,
             loader: 'babel-loader',
           },
           {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
       ]

希望这会起作用。

如何使用webpack跟踪对html的更改？

1 个答案: