The webpack version is 2.0 because the project started with vuecli scaffolding. Later, the project will introduce plug-ins that need to support webpack4.0. So with this update, I’ll take a look at Vue’s Webpack

Webpack directory

  • utils.js
  • webpack.dev.js
  • webpack.base.js
  • webpack.prod.js

utils.js

Attached is the upgraded utils.js

Replace the extract-text-webpack-plugin with the mini-CSs-extract-plugin

generateLoaders

Here is where to configure loader. Rules of Webpack have been added. You can remove this section of Vue if it’s too much trouble. And of course here I’m building on the original,

   function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [MiniCssExtractPlugin.loader, cssLoader, postcssLoader] : [cssLoader]

        if (loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            })
        }
     return ['vue-style-loader'].concat(loaders)

    }
Copy the code

The complete code

'use strict' const path = require('path') const config = require('.. /config') // const ExtractTextPlugin = require('extract-text-webpack-plugin') const packageConfig = require('.. /package.json') exports.assetsPath = function(_path) { const assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) } exports.cssLoaders = function(options) { options = options || {} const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) return ['vue-style-loader'].concat(loaders) // if (options.extract) { // return ExtractTextPlugin.extract({ // use: loaders, // fallback: 'vue-style-loader' // }) // } else { // return ['vue-style-loader'].concat(loaders) // } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function(options) { const output = [] const loaders = exports.cssLoaders(options) for (const extension in loaders) { const loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output } exports.createNotifierCallback = () => { const notifier = require('node-notifier') return (severity, errors) => { if (severity ! == 'error') return const error = errors[0] const filename = error.file && error.file.split('! ').pop() notifier.notify({ title: packageConfig.name, message: severity + ': ' + error.name, subtitle: filename || '', icon: path.join(__dirname, 'logo.png') }) } }Copy the code

With that, the Utils revision is over. Any questions are welcome. New optimization will be added to the post.