在vue-cli3.0中自定css、js和圖片的打包路徑

前言

咱們有時候由於一些特殊需求，可能須要將js/css/img等資源文件都打包到根路徑下，但vue-cli3.0的路徑配置中僅有 assetsDir配置項可以配置全部的靜態文件所在的文件夾，並不能針對css/js/img等資源文件分別來作設置，那麼請看我如未嘗試的吧！

分析

衆所周知，vue-cli3.0使用了webpack進行打包處理，那麼咱們是否能夠拿到目前打包默認的一些webpack配置，並在這些配置中找到一些蛛絲馬跡，從而更改配置來實現對打包路徑的更改呢？
好在vue-cli3.0提供了這樣的功能！
我假設您已經安裝了vue-cli3.0，那麼打開命令行，運行一下命令：

vue ui

這個命令將會啓動一個頁面，用來簡化開發過程當中的一系列操做。
咱們先導入當前項目（本身摸索下，此處不展開詳說）。
咱們進入<任務>頁面，點擊inspect選項卡，並點擊運行按鈕，將會獲得該項目下全部的webpack配置項。
將這個配置複製到咱們的編輯器中，而後咱們查找路徑'js/', 'css/', 'img/'，將會看到這些路徑所配置的一些地方，個人項目中這些配置在如下部分：
output配置爲：

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

plugin配置爲：

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

loader配置爲：

/* 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]'
        }
        }
    ]
},

// 其餘類型資源的loader等等

那麼問題就簡單了，咱們更改掉這些webpack配置就能夠了。

更改webpack配置

須要更改的webpack相關配置以下：

js路徑配置更改

js路徑更改output配置便可，output配置在configureWebpack配置項中進行更改，由於vue.config.js中對於configureWebpack選項的配置將會被merge到webpack配置中，因此更改該項配置便可，以下：

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

    },
}

更改MiniCssExtractPlugin插件配置

更改該配置須要先安裝MiniCssExtractPlugin插件到開發依賴中，以下：

npm install --save-dev mini-css-extract-plugin
# 或者
yarn add mini-css-extract-plugin --dev

而後在vue.config.js文件中添加相關配置到chainWebpack便可，以下所示：

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)
    },
}

更改各類資源loader配置

更改該配置仍然須要將相關配置添加到chainWepack配置項中，以下：

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]'
            })
    },
}

結語

總的配置項以下所示：

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]'
            })

    },
}

這時，在運行inspect檢查webpack配置，便可看到相關路徑前的css/，js/，img/等前綴已經消失，快快打包嘗試吧！

---

diboot 簡單高效的輕代碼開發框架 (求star)