vue-cli4 搭建的项目按照文档提示设置无效

const path = require('path') const CompressionWebpackPlugin = require('compression-webpack-plugin')

const resolve = dir => path.resolve(__dirname, dir) const productConfig = require('./src/version/config') const isProd = process.env.NODE_ENV === 'production'

module.exports = { publicPath: '/', // vue-cli3.3+,部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致 assetsDir: 'static', // 静态资源地址 productionSourceMap: false, transpileDependencies: ['view-design', 'crypto-js'], // 解决在 ie 上无法访问的问题 // scss 全局引入 css: { extract: isProd, // 开发环境下关闭，true 和热更新不兼容，保证 css 热更新 sourceMap: !isProd, loaderOptions: { sass: { // implementation: require('sass'), additionalData: @import "@/styles/common/_variables.scss"; @import "@/styles/common/_mixins.scss"; , }, }, }, chainWebpack: config => { // 修复HMR config.resolve.symlinks(true)

    // 根据 js 版本配置文件修改 index.html 文件中的产品名称
    config.plugin('html').tap(options => {
        options[0].title = productConfig.productName.join('')

        return options
    })

    return config
},
// 配置 webpack
configureWebpack: config => {
    // 路径别名
    config.resolve.alias = {
        ...config.resolve.alias,
        '@assets': resolve('src/assets'),
        '@styles': resolve('src/styles'),
        '@services': resolve('src/services'),
        '@router': resolve('src/router'),
        '@store': resolve('src/store'),
        '@components': resolve('src/components'),
        '@views': resolve('src/views'),
        '@scripts': resolve('src/scripts'),
        '@constants': resolve('src/constants'),
        '@mixins': resolve('src/scripts/mixins'),
        '@utils': resolve('src/scripts/utils'),
    }
    const sassLoader = require.resolve('sass-loader')

    config.module.rules
        .filter(rule => {
            return rule.test.toString().indexOf('scss') !== -1
        })
        .forEach(rule => {
            rule.oneOf.forEach(oneOfRule => {
                const sassLoaderIndex = oneOfRule.use.findIndex(
                    item => item.loader === sassLoader
                )
                oneOfRule.use.splice(sassLoaderIndex, 0, {
                    loader: require.resolve('css-unicode-loader'),
                })
            })
        })
    // 添加对 pdf 文件的处理 loader
    console.log(config.module.rules)
    config.module.rules = [
        ...config.module.rules,
        {
            test: /\.pdf$/,
            use: 'url-loader',
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'css-unicode-loader', // Convert double-byte character to unicode encoding.
                },
                {
                    loader: 'sass-loader', // Compiles Sass to CSS
                },
            ],
        },
    ]

    // gzip 压缩
    if (isProd) {
        config.plugins = [
            ...config.plugins,
            new CompressionWebpackPlugin({
                filename: '[path][base].gz',
                algorithm: 'gzip',
                test: /\.(js|css|html|svg)(\?.*)?$/i,
                threshold: 10240,
                minRatio: 0.8,
            }),
        ]
    } else {
        // 生成可调试的代码
        config.output.devtoolModuleFilenameTemplate = info => {
            const resPath = info.resourcePath

            if (
                (/\.vue$/.test(resPath) &&
                    !/type=script/.test(info.identifier)) ||
                /node_modules/.test(resPath)
            ) {
                return `webpack:///${resPath}?${info.hash}`
            }
            return `webpack:///${resPath.replace(
                './src',
                'uncompiled-code/src'
            )}`
        }
    }
},

} Ï

styzhang / css-unicode-loader

vue-cli4 搭建的项目按照文档提示设置无效 #8