在 Vue CLI 3 中使用 Extract-Text-Webpack-Plugin

Question

我使用 Vue CLI 创建了一个应用程序，它现在在 vue.config.js 后面抽象出 Webpack 配置。 我正在尝试将我的 CSS 提取到 styles.css 文件中。 现在，它正在提取到随机命名的文件，如下所示：

dist\js\vendor.4ee179da.js 74.69 kb 26.68 kb dist\js\app.5e840ed0.js 4.06 kb 1.84 kb dist\css\app.4c22f75b.css 161.13 kb 21.59 kb

我怀疑我的 css.extract 需要是一个对象，比如

{
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
}

但是添加这个会破坏新的 _ValidationError2.default(ajv.errors, name) 的构建。

下面是我的 vue.config.js：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    // Project deployment base
    // By default we assume your app will be deployed at the root of a domain,
    // e.g. https://www.my-app.com/
    // If your app is deployed at a sub-path, you will need to specify that
    // sub-path here. For example, if your app is deployed at
    // https://www.foobar.com/my-app/
    // then change this to '/my-app/'
    baseUrl: '/',

    // where to output built files
    outputDir: 'dist',

    // whether to use eslint-loader for lint on save.
    // valid values: true | false | 'error'
    // when set to 'error', lint errors will cause compilation to fail.
    lintOnSave: true,

    // use the full build with in-browser compiler?
    // https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    compiler: false,

    // generate sourceMap for production build?
    productionSourceMap: true,

    // tweak internal webpack configuration.
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {
        new ExtractTextPlugin('assets/style.css')
    },

    // CSS related options
    css: {
        // extract CSS in components into a single CSS file (only in production)
        // can also be an object of options to pass to extract-text-webpack-plugin
        extract: true,

        // Enable CSS modules for all css / pre-processor files.
        // This option does not affect *.vue files.
        modules: true,

        // enable CSS source maps?
        sourceMap: false,

        // pass custom options to pre-processor loaders. e.g. to pass options to
        // sass-loader, use { sass: { ... } }
        loaderOptions: {
            sass:{
                css: 'css-loader',
                'scss':'css-loader | sass-loader'
            }
        }
    },

    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,

    // options for the PWA plugin.
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},

    // configure webpack-dev-server behavior
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8082,
        https: false,
        hotOnly: false,
        // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
        proxy: null, // string | Object
        before: app => {}
    },

    // options for 3rd party plugins
    pluginOptions: {
        // ...
    }
}

Answer 1

解决它。 这是正确的方法。 在 CSS 下，将提取更改为：

extract: {filename: 'styles.css'}

我在其中保留了 loaderOptions、sourceMap 和 modules 对象，这似乎工作正常。

Answer 2

Vue CLI 3 实际上使用mini-css-extract-plugin ，而不是extract-text-webpack-plugin 。

当您传入extract: {filename: 'styles.css'}时，您实际上是在配置mini-css-extract-plugin 。 您可以在此处查看这些文档。

您可以为mini-css-extract-plugin ( docs ) 设置filename 。 这是 Vue 传递它的地方。

您应该能够删除对extract-text-webpack-plugin所有引用，并且您的代码将继续正常工作！