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


    就拿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

  • 相关阅读:
    定时器
    js中script的上下放置区别 , Dom的增删改创建
    函数声明与应用
    常规选择器
    表格的制作
    流程控制
    For循环
    洛谷P1419寻找段落
    洛谷P1021邮票面值设计
    洛谷P3119草鉴定
  • 原文地址:https://www.cnblogs.com/jehorn/p/10833068.html
Copyright © 2020-2023  润新知