webpack打包图片及js问题

Question

如题，使用webpack打包，出现两个问题，
1.在base.js引入change.js(带有zh_tran)，打包后报错如下，看了一下bundle文件把change.js放在了base.js（引用zh_tran）内容后面了

2.图片出不了，打包成base64能正常显示，其他的不知错哪了

文件结构

webpack配置 webpack.base.conf.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件
const CleanWebpackPlugin = require('clean-webpack-plugin')

const path = require('path')

const productionConfig = require('./webpack.prod.conf.js') // 引入生产环境配置文件
const developmentConfig = require('./webpack.dev.conf.js') // 引入开发环境配置文件

/**
 * 根据不同的环境，生成不同的配置
 * @param {String} env "development" or "production"
 */
const generateConfig = env => {
    // 将需要的 Loader 和 Plugin 单独声明

    let scriptLoader = [
        {
            loader: 'babel-loader'
        }
    ]

    let cssLoader = [
        'style-loader',
        'css-loader',
        'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀
        'sass-loader' // 使用 sass-loader 将 scss 转为 css
    ]

    let cssExtractLoader = [
        {
            loader: MiniCssExtractPlugin.loader
        },
        'css-loader',
        'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀
        'sass-loader' // 使用 sass-loader 将 scss 转为 css
    ]

    let fontLoader = [
        {
            loader: 'url-loader',
            options: {
                name: '[name]-[hash:5].min.[ext]',
                limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                publicPath: 'fonts/',
                outputPath: 'fonts/'
            }
        }
    ]

    let imageLoader = [
        {
            loader: 'url-loader',
            options: {
                name: '[name]-[hash:5].min.[ext]',
                limit: 10000, // size <= 10KB
                outputPath: './static/img/'
            }
        },
        // 图片压缩
        {
            loader: 'image-webpack-loader',
            options: {
                // 压缩 jpg/jpeg 图片
                mozjpeg: {
                    progressive: true,
                    quality: 50 // 压缩率
                },
                // 压缩 png 图片
                pngquant: {
                    quality: '65-90',
                    speed: 4
                }
            }
        }
    ]

    let styleLoader =
        env === 'production'
            ? cssExtractLoader // 生产环境下压缩 css 代码
            : cssLoader // 开发环境：页内样式嵌入

    return {
        entry: {
            index: './src/js/index.js',
            // comany: './src/js/company.js',
        },
        output: {
            publicPath: env === 'development' ? '/' : './',
            path: path.resolve(__dirname, 'dist'),
            filename: '[name]-[hash:5].bundle.js',
            chunkFilename: '[name]-[hash:5].chunk.js'
        },
        resolve: {
            alias: {
                jquery: path.resolve(__dirname, '..', './static/lib/jquery-3.3.1.min.js'),
                vue: path.resolve(__dirname, '..', 'static/lib/vue.min.js'),
                vuex: path.resolve(__dirname, '..', 'static/lib/vuex.js'),
                // vue_router: path.resolve(__dirname, '..', 'static/lib/vue-router.js')
            }
        },
        module: {
            rules: [
                { test: /\.js$/, exclude: /(node_modules)/, use: scriptLoader },
                { test: /\.(sa|sc|c)ss$/, use: styleLoader },
                { test: /\.(eot|woff2?|ttf|svg)$/, use: fontLoader },
                { test: /\.(png|jpg|jpeg|gif)$/, use: imageLoader }
            ]
        },
        plugins: [
            // 开发环境和生产环境二者均需要的插件
            new HtmlWebpackPlugin({
                // title: 'webpack4 实战',
                filename: './html/index.html',
                template: path.resolve(__dirname, '..', './src/html/index.html'),
                chunks: ['index'],
                minify: {
                    removeComments: true, // 移除 HTML 中的注释
                    collapseWhitespace: true, // 删除空白符与换行符
                    minifyCSS: true // 压缩内联 css
                }
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',
                Vue: 'vue',
                Vuex: 'vuex',
                // Vue
            }),
            new CleanWebpackPlugin()
        ]
    }
}

module.exports = env => {
    let config = env === 'production' ? productionConfig : developmentConfig
    return merge(generateConfig(env), config) // 合并 公共配置 和 环境配置
}

webpack.dev.conf.js

// 开发配置主要是设置跨域、开启源码调试、热更新
const webpack = require('webpack')

const path = require('path')

module.exports = {
    mode: 'development',
    devtool: 'source-map', // 调试源码
    devServer: {
        contentBase: path.join(__dirname, '../dist/'),
        port: 8000,
        hot: true,
        overlay: true,
        proxy: {
            '/comments': {
                target: 'xxxx',
                changeOrigin: true,
                logLevel: 'debug',
                headers: {
                    Cookie: ''
                }
            }
        },
        historyApiFallback: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
}

Answer 1

不知道 zh_tran 是什么，看起来是个 JS 库？从报错信息来看，应该是使用 zh_tran 的时候它还没定义，所以你使用 zh_tran 的时候没有用 import？

如果是这样的话，要么你用模块（CommonJS 或 ESM）的方式来引入 zh_tran，要么你加个 externals 然后手动在 HTML 引入 JS。