Question

我正在使用Vue.js与Django一起创建一个SPA应用程序，我使用webpack（特别是webpack-simple来自vue-cli安装程序）来编译，修改和捆绑代码。

我使用以下内容来观察＆＃34;并热重新加载代码：

$ ./node_modules/.bin/webpack --config webpack.config.js --watch

问题是每次我更改代码并构建它时会生成一个新的.js文件并更新webpack-stats.json指向那个，但不会删除旧的。{1}}。如何删除旧的（无用的）文件？

webpack.config.js：

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')


function resolve (dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    context: __dirname,

    // entry point of our app. 
    // assets/js/index.js should require other js modules and dependencies it needs
    entry: './src/main', 

    output: {
            path: path.resolve('./static/bundles/'),
            filename: "[name]-[hash].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),
    ],

    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
            {test: /\.vue$/, loader: 'vue-loader'}

        ],
    },

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        }
    },
}

webpack-stats.json：

{  
   "status":"done",
   "chunks":{  
      "main":[  
         {  
            "name":"main-faa72a69b29c1decd182.js",
            "path":"/Users/me/Code/projectname/static/bundles/main-faa72a69b29c1decd182.js"
         }
      ]
   }
}

另外，将这个添加到git / source控件的好方法是什么？否则它每次都会改变，我必须像这样添加它：

$ git add static/bundles/main-XXXXX.js -f

这很烦人。

任何指针？谢谢！

Answer 1

在大多数情况下，当前最新版本不需要传递任何选项。有关详细信息，请查阅文档https://www.npmjs.com/package/clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const webpackConfig = {
    plugins: [
        /**
         * All files inside webpack's output.path directory will be removed once, but the
         * directory itself will not be. If using webpack 4+'s default configuration,
         * everything under <PROJECT_DIR>/dist/ will be removed.
         * Use cleanOnceBeforeBuildPatterns to override this behavior.
         *
         * During rebuilds, all webpack assets that are not used anymore
         * will be removed automatically.
         *
         * See `Options and Defaults` for information
         */
        new CleanWebpackPlugin(),
    ],
};

module.exports = webpackConfig;

Answer 2

您应调整webpack，以便仅在实际构建生产时创建新捆绑包。

从webpack-simple vue-cli模板中，您只会看到uglifying和minifying只在设置为生产环境而不是dev env时发生：

SELECT
A.NAMES, 
A.CODE, 
B.NUM_TYP, 
B.PHONE_NUN, 
B.ADD_TYP, 
B.ADDR
FROM NAMES A LEFT JOIN

(
SELECT PHONE.ID, PHONE.NUM_TYP, PHONE.PHONE_NUM, ADDRESS.ADD_TYP, ADDRESS.ADDR
FROM PHONE LEFT JOIN ADDRESS ON (PHONE.NUM_TYP = ADDRESS.ADD_TYP) AND (PHONE.ID = ADDRESS.ID)

UNION
SELECT ADDRESS.ID, PHONE.USG_TYP, PHONE.PHONE_NUM, ADDRESS.ADD_TYP, ADDRESS.ADDR
FROM ADDRESS LEFT JOIN PHONE ON (ADDRESS.ADD_TYP = PHONE.NUM_TYP) AND (ADDRESS.ID = PHONE.ID)) AS B ON A.ID = B.ID;

Answer 3

您需要clean-webpack-plugin github link
首先安装它：

npm i clean-webpack-plugin --save-dev

然后在webpack.config.js中添加以下行（我在添加的行中添加了注释）：

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
const CleanWebpackPlugin = require('clean-webpack-plugin'); // require clean-webpack-plugin

function resolve (dir) {
    return path.join(__dirname, dir)
}

// the path(s) that should be cleaned
let pathsToClean = [
    path.resolve('./static/bundles/'),  // same as output path
]

// the clean options to use
let cleanOptions = {
    root: __dirname,
    exclude:  [],  // add files you wanna exclude here
    verbose:  true,
    dry:      false
}

module.exports = {
    context: __dirname,

    // entry point of our app. 
    // assets/js/index.js should require other js modules and dependencies it needs
    entry: './src/main', 

    output: {
        path: path.resolve('./static/bundles/'),
        filename: "[name]-[hash].js",
    },

    plugins: [
        new CleanWebpackPlugin(pathsToClean, cleanOptions),  // add clean-webpack to plugins
        new BundleTracker({filename: './webpack-stats.json'}),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),
    ],

    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
            {test: /\.vue$/, loader: 'vue-loader'}

        ],
    },

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        }
    },
}

就是这样，现在每次您运行npm run build时，插件都会删除static/bundles/文件夹然后进行构建，因此所有以前的文件都将被删除，只有新文件在那里。使用npm run watch

观看时不会删除旧文件

Vue.js / webpack：当热重载转换它们时，如何清除旧的bundle main - * .js文件？

3 个答案: