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、打包

相关推荐
持久的棒棒君27 分钟前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆2 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz3 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou03 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干3 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大4 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu4 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端4 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao4 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫4 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor