webpack打包之 copy-webpack-plugin

copy-webpack-plugin 打包复制文件插件。

1、什么时候要使用?

在离线应用中,前端所有文件都需在在本地,有些文件(比如iconFont以及一些静态img)需要转为离线文件,这些文件可以直接引用更方便些,这就需要在打包时直接复制到打包文件下。

2、安装依赖

javascript 复制代码
npm i copy-webpack-plugin --save-dev

3、配置webpack

javascript 复制代码
const compressionPlugin = require('compression-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require("path");
module.exports = {
    devServer: {
        //开发环境的跨域问题解决,后端服务ip 和 端口
        proxy: {
            '/eom': {
                target: 'http://127.0.0.1:7000',
                changeOrigin: true
            },
            '/pangu': {
                target: 'http://127.0.0.1:7000',
                changeOrigin: true
            },
            /**调用字典配置 */
            'pangu/eom/asset': {
                target: 'http://127.0.0.1:9003',
                changeOrigin: true,
                pathRewrite: {
                    '^/pangu/eom/asset': '/eom/asset'
                }
            }
        }
    },

    pages: {
        index: {
            // page 的入口
            entry: 'src/TdPluginEomServiceMain.js',
            // 模板来源
            template: 'public/index.html',
            // 输出文件名
            filename: 'index.html'
        }
    },
    publicPath: './',
    assetsDir: './eom',
    lintOnSave: false,
    productionSourceMap: false, //打包加密
    filenameHashing: process.env.NODE_ENV === 'production' ? false : true,
    configureWebpack: () => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new compressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 10240,
                        deleteOriginalAssets: false
                    }),
                    new CopyWebpackPlugin([{
                        from: path.resolve(__dirname, './src/static'),  //文件资源路径
                        to: path.resolve(__dirname, './dist/eom/assets'),//复制文件要到的目的路径
                        ignore: ['.*']
                    }]) //打包静态资源

                ],
                output: {
                    jsonpFunction: 'TdPluginEomServiceMain'
                }
            };
        }
    }
};

4、打包

相关推荐
GISer_Jing1 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart