关于webpack:webpack封装配置详解

38次阅读

共计 2341 个字符，预计需要花费 6 分钟才能阅读完成。

// utils.js 文件次要是用来解决各种 css loader 的, 比方 css-loader,less-loader 等。// 引入 path 模块
const path = require('path')
// 引入之前的 config 模块
const config = require('../config')
// 引入 "extract-text-webpack-plugin" 它的作用是打包后将生成的 css 文件通过 link 的形式引入到 html 中，如果不应用这个插件，那么 css 就打包到 <head> 的 style 中
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 引入 package.json
const pkg = require('../package.json')
exports.assetsSubDirectory = function (_path) {
    // 联合 config 文件的代码能够晓得 当环境为生产环境时 assetsSubDirectory 为 static 开发环境也是 static
  const assetsSubDirectory =
    progress.env.NODE_ENV === 'production'
      ? config.build.assetsSubDirectory
      : config.dev.assetsSubDirectory
    //   path.posix.join() 是 path.join 的一种兼容写法 它的作用是门路的拼接 比方 path.posix.join('/aa/s','bb')
      return path.posix.join(assetsSubDirectory,_path)
}
// 用来生成 Loader 的函数，自身能够用在 vue-loader 的配置上，同时也是为 styleLoader 函数应用

exports.cssLoaders = function(options){
    // 如果没有传参就默认空对象
    options = options||{}
    // 配置 css-loader,css-loader 能够让解决 css 中的 @import 或者 url()
    const cssLoader = {
        loader:'css-loader',
        options:{sourceMap:options.sourceMap}
    }
    // 配置 postcss-loader, 次要性能是补全 css 中的兼容性前缀  比方“-webkit-”等
    var postcssLoader = {
        loader:"postcss-laoder",
        options:{sourceMap:options.sourceMap}
    }
    
    // 生成 loader 的公有办法
    function generateLoaders(loader,loaderOptions){
        // 参数的 usePostCss 属性是否为 true 是就应用两个 loader, 否则只应用 css-loader
        const loaders = options.usePostCSS? [cssLoader,postcssLoader]:[cssLoader]
        if(loader){
            // 给 generateLoaders 传 loader 参数的话 比方 less 或者 sass 就将这个 loader 的配置传入到 loaders 数组中
            loaders.push({
                loader:loader+'-loader',
                // Object.assign() 是 es6 的语法  用来合并对象
                options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})
            })
        }
// 如果 options 参数的 extract 属性为 true  即应用 extract text plugin   将 css 抽成独自的文件  否则就将 css 写进 style     
        if(options.extract){
            return ExtractTextPlugin.extract({
                use:loaders,
                // vue-style-loader 能够了解为 vue 版的 style-loader  它可将 css 放进 style 中
                fallback:'vue-style-loader'
            })
            
        }else{return ['vue-style-loader'].concat('loaders')
        }

    }
    return {
        // 返回各种 loader
        css:generateLoaders(),
        postcss:generateLoaders(),
        less:generateLoaders('less'),
        sass:generateLoaders('sass',{indentedSyntax:true}),
        scss:generateLoaders('sass'),
        stylus:generateLoaders('stylus'),
        styl:generateLoaders('stylus')
    }
}

// 生成开发环境下的 loader 的配置，应用在 (webpack.dev.config.js 中)
exports.styleLoaders = function(options){const output = []
    // 调用 cssLoader 办法 返回 loaders 的对象
    const loaders = exports.cssLoaders(options)
    // 遍历每一个 loader 并配置成对应的格局  传给 output 数组
    for(const extension in loaders){const loader = loaders[extension]
        output.push({test:new RegExp('\\.'+extension + '$'),
            use:loader
        })
    }
    return output
}

正文完