时间戳

首页 > 解决方案 > 安装 babel 后 WebPack 不输出最新文件

javascript - 安装 babel 后 WebPack 不输出最新文件

问题描述

Webpack 在安装 babel 之前运行良好，但之后它不会生成最新文件。我正在使用 webpack 4.17.2 版和 babel loader 8.0.2 版。如何解决此问题，因为我已将 webpack 集成到 gulp 自动化中。请指导我如何解决这个问题并在我第一次使用它时纠正它。

这是 Webpack.config.js 文件

var path = require('path');
module.exports = {
    entry: './app/assets/scripts/App.js',
    output: {
        path: path.resolve(__dirname, "./app/temp/script"),
        filename: 'App.js'
    },

    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            }
        }]
    }
}

这是 Package.json 文件

    {
      "name": "travel-site",
      "version": "1.0.0",
      "dependencies": {
        "jquery": "^3.2.1",
        "jquery-smooth-scroll": "2.2.0",
        "lazysizes": "4.0.1",
        "normalize.css": "7.0.0",
        "picturefill": "3.0.2",
        "waypoints": "4.0.1"
      },
      "devDependencies": {
        "@babel/preset-env": "^7.0.0",
        "autoprefixer": "7.1.6",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.2",
        "babel-preset-es2015": "^6.24.1",
        "browser-sync": "2.18.13",
        "del": "^3.0.0",
        "gulp": "^3.9.1",
        "gulp-cssnano": "2.1.2",
        "gulp-imagemin": "4.0.0",
        "gulp-modernizr": "1.0.0-alpha",
        "gulp-postcss": "^7.0.0",
        "gulp-rename": "^1.2.2",
        "gulp-rev": "8.1.0",
        "gulp-svg-sprite": "^1.4.0",
        "gulp-svg2png": "^2.0.2",
        "gulp-uglify": "^3.0.0",
        "gulp-usemin": "^0.3.28",
        "gulp-watch": "^4.3.11",
        "postcss-hexrgba": "^1.0.1",
        "postcss-import": "^11.0.0",
        "postcss-mixins": "^6.2.0",
        "postcss-nested": "^2.1.2",
        "postcss-simple-vars": "^4.1.0",
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0"
      }
    }

标签： javascriptwebpackbabeljsbabel-loader

解决方案

一种解决方案是在每次编译时使用 clean-webpack-plugin 删除旧文件。 

 const cleanWebPackPlugin = require('clean-webpack-plugin');

plugins: [
        new cleanWebPackPlugin(['path-to-App.js'])
    ]

推荐阅读