Define the packaging path of CSS, JS and pictures in vue-cli 3.0

Time:2020-1-3

Preface

Sometimes, because of some special requirements, we may need to package JS / CSS / img and other resource files under the root path, but only in the path configuration of vue-cli 3.0 assetsDirThe configuration item can configure the folders where all the static files are located, and it can’t be set separately for CSS / JS / img and other resource files, so please see how I try!

Analysis

As we all know, vue-cli 3.0 uses webback for packaging. Can we get some default webback configurations for packaging, and find some clues in these configurations, so as to change the configuration to achieve the change of packaging path?
Fortunately, vue-cli 3.0 provides such a function!
I assume that you have installed vue-cli 3.0, open the command line and run the following command:

vue ui

This command will launch a page to simplify a series of operations in the development process.
Let’s import the current project first (let’s explore it by ourselves, we won’t elaborate here).
We go to the task page, click the inspect tab, and click the run button to get all the webback configuration items under the project.
Copy this configuration to our editor, and then we look for the paths’js/’,’css/’,’img/’. We will see some places configured by these paths. These configurations are in the following sections of my project:
Output is configured as:

output: {
    path: 'xxx',
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '',
    chunkFilename: 'js/[name].[contenthash:8].js'
}

Plugin is configured as:

/* config.plugin('extract-css') */
new MiniCssExtractPlugin(
    {
    filename: 'css/[name].[contenthash:8].css',
    chunkFilename: 'css/[name].[contenthash:8].css'
    }
),

The loader is configured as:

/* config.module.rule('images') */
{
    test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
    use: [
        /* config.module.rule('images').use('url-loader') */
        {
        loader: 'url-loader',
        options: {
            limit: 4096,
            fallback: {
            loader: 'file-loader',
            options: {
                name: 'img/[name].[hash:8].[ext]'
            }
            }
        }
        }
    ]
},
/* config.module.rule('svg') */
{
    test: /\.(svg)(\?.*)?$/,
    use: [
        /* config.module.rule('svg').use('file-loader') */
        {
        loader: 'file-loader',
        options: {
            name: 'img/[name].[hash:8].[ext]'
        }
        }
    ]
},

//Loaders of other types of resources, etc

So the problem is simple. We can change the configuration of these webbacks.

Change webpack configuration

The relevant configuration of webpack to be changed is as follows:

JS path configuration change

JS path changes the output configuration. The output configuration is changed in the configurewebpack configuration item. Because the configuration of configurewebpack option in vue.config.js will be merged into the webpack configuration, the configuration can be changed as follows:

module.exports = {
    configureWebpack: config => {
        // js output config
        config.output.filename = '[name].[contenthash:8].js'
        config.output.chunkFilename = '[name].[contenthash:8].js'

    },
}

Change minicssextractplugin configuration

To change this configuration, you need to install the minicssextractplugin plug-in into the development dependency, as follows:

npm install --save-dev mini-css-extract-plugin
Or
yarn add mini-css-extract-plugin --dev

Then add the relevant configuration to chainwebpack in vue.config.js file, as shown below:

module.exports = {
    chainWebpack: config => {
        // css output config
        let miniCssExtractPlugin = new MiniCssExtractPlugin(
            {
                filename: '[name].[contenthash:8].css',
                chunkFilename: '[name].[contenthash:8].css'
            }
        )
        config.plugin('extract-css').use(miniCssExtractPlugin)
    },
}

Change the configuration of various resource loaders

To change the configuration, you still need to add the relevant configuration to the chainwepack configuration item, as follows:

module.exports = {
    chainWebpack: config => {
        // image output config
        config.module.rule('images')
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('url-loader')
            .loader('file-loader')
            .options({
                name: '[name].[hash:8].[ext]'
            })
        config.module.rule('svg')
            .test(/\.(svg)(\?.*)?$/)
            .use('file-loader')
            .loader('file-loader')
            .options({
                name: '[name].[hash:8].[ext]'
            })
    },
}

epilogue

The total configuration items are as follows:

module.exports = {
    configureWebpack: config => {
        // js output config
        config.output.filename = '[name].[contenthash:8].js'
        config.output.chunkFilename = '[name].[contenthash:8].js'

    },
    chainWebpack: config => {
        // css output config
        let miniCssExtractPlugin = new MiniCssExtractPlugin(
            {
                filename: '[name].[contenthash:8].css',
                chunkFilename: '[name].[contenthash:8].css'
            }
        )
        config.plugin('extract-css').use(miniCssExtractPlugin)

        // image output config
        config.module.rule('images')
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('url-loader')
            .loader('file-loader')
            .options({
                name: '[name].[hash:8].[ext]'
            })
        config.module.rule('svg')
            .test(/\.(svg)(\?.*)?$/)
            .use('file-loader')
            .loader('file-loader')
            .options({
                name: '[name].[hash:8].[ext]'
            })

    },
}

At this time, run inspect to check the webpack configuration, and you can see that the prefixes of CSS /, JS /, IMG / before the relevant path have disappeared. Pack and try quickly!


A simple and efficient light code development framework for diboot

Recommended Today

Review of SQL Sever basic command

catalogue preface Installation of virtual machine Commands and operations Basic command syntax Case sensitive SQL keyword and function name Column and Index Names alias Too long to see? Space Database connection Connection of SSMS Connection of command line Database operation establish delete constraint integrity constraint Common constraints NOT NULL UNIQUE PRIMARY KEY FOREIGN KEY DEFAULT […]