码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-05-08 17:30:23      阅读:437      评论:0      收藏:0      [点我收藏+]

标签:str   may   plugin   turn   src   exports   ack   asc   pac   

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

技术图片

这时候没有在项目中引用,不会经过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>

至此就算大功告成。

技术图片

The end...Last updated by Jehorn, 5:17 PM, Wednesday, May 8, 2019

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

标签:str   may   plugin   turn   src   exports   ack   asc   pac   

原文地址:https://www.cnblogs.com/jehorn/p/10833068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!