Webpack将静态资源拷贝并压缩至输出文件夹

佚名 6年前 (2019-05-08) 随笔 1296人围观抢沙发百度已收录

就拿Vue项目来说，比如要将src/assets/js下的静态js文件，直接在public/index.html中引用：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

这时候没有在项目中引用，不会经过wenpack的loader，也就不会自己打包到dist目录下。

可以通过配置vue.config.js来实现：

cmd:

npm install uglify-es --save-dev

vue.config.js:

const UglifyJS = require('uglify-es');
const CopyWebpackPlugin = require('copy-webpack-plugin');

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

module.exports = {
    ...
    configureWebpack: config => {
    
    config.plugins.push(
            new CopyWebpackPlugin([
                {
                    from: resolve('src/assets/js'),
                    to: 'js',
                    transform: function (content) {
                        return UglifyJS.minify(content.toString()).code;
                    }
                }
            ])
        );
    }
}

index.html:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    ...
    
    <script src="<%= BASE_URL %>js/mobile-response.js"></script>
    
  </head>
  ...
</html>

至此就算大功告成。