前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >webpack Develoment 和 Production 模式的区分打包

webpack Develoment 和 Production 模式的区分打包

作者头像
用户10106350
发布2022-10-28 10:28:20
2260
发布2022-10-28 10:28:20
举报
文章被收录于专栏:WflynnWebWflynnWeb
代码语言:javascript
复制
代码已上传至github
github代码地址:https://github.com/Miofly/mio.git

webpack.common.js
代码语言:javascript
复制
const merge = require('webpack-merge')
const devConfig = require('./webpack.dev')
const prodConfig = require('./webpack.prod')

const commonConfig = {
    entry: { // 上面是简写
        // lodash: './src/lodash.js',
        // myVue: './src/index.js',
        sub: './src/main.js'
    },
    output: { // 输出到bundle/bundle.js
        // publicPath: 'https://localhost:8080//', // 类似base_url
        filename: '[name].js', // 打包文件的文件名 这样entry可以配置两个入口js 入口文件走这里
        chunkFilename: '[name].chunk.js', // index.js里又引入的js走这里
        // path: path.resolve(__dirname, './dist') //  __dirname指webpack.config.js文件的当前路径
    },
     resolve: {
        // extensions: ['.js', '.vue', '.json'], // 可以导入的时候忽略的拓展名范围
        extensions: ['.js', '.json', '.vue', '.scss', '.css'], // 省略文件名后缀
        alias: {
            '@': resolve('src'),
            zj: resolve('src/components'),
            mioJs: resolve('src/common/js'),
            json: resolve('src/static/mockJson')
        }
    },
}

module.exports = (env) => {
    if (env && env.production) { // 线上环境
        return merge(commonConfig, prodConfig)
    } else { // 开发环境
        return merge(commonConfig, devConfig)
    }
}
代码语言:javascript
复制
webpack.dev.js
const devConfig = {
     mode: 'development', // development production 默认是被压缩
     devtool: 'cheap-module-eval-source-map', // development 开发环境最优配置
     devServer: { // 可以开启一个web服务器, 不生成dist目录,放到内存中
        contentBase: './dist',
        open: true, // 自动打开浏览器
        port: 9999,
        // historyApiFallback: false,
        // hot: true,
        // hotOnly: true, // 浏览器不刷新
        proxy: { // 跨域代理
            '/api': 'http://localhost:3030'
        }
    },
}
module.exports = devConfig
代码语言:javascript
复制
webpack.prod.js
const prodConfig = { // 配置好后 npx webpack
    mode: 'production', // development  production
    devtool: 'cheap-module-source-map', // production 生产环境
}

module.exports = prodConfig
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-05-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WflynnWeb 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档