时间戳

首页 > 解决方案 > 如何使用 webpack 跟踪对 html 的更改？

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

问题描述

从 babel、css-loader 和 style-loader + extract-text-webpack-plugin 构建。另外是bootstrap和jquery。

jquery 上的更改与 gulp'e 上的浏览​​器同步一样被计算和更改，但 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;
   }

标签： webpack

解决方案

对于开发环境，您可以简单地调整您的 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: [
         {
           test: /\.js$/,
             loader: 'babel-loader',
           },
           {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
       ]

希望这会奏效。

推荐阅读