Webpack將靜態資源拷貝並壓縮至輸出文件夾

時間 2019-12-08

原文原文鏈接

就拿Vue項目來講，好比要將src/assets/js下的靜態js文件，直接在public/index.html中引用：javascript

這時候沒有在項目中引用，不會通過wenpack的loader，也就不會本身打包到dist目錄下。html

能夠經過配置vue.config.js來實現：vue

cmd:java

npm install uglify-es --save-dev

vue.config.js:webpack

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:web

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

至此就算大功告成。npm

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

相關標籤/搜索