vue中使用webpack（vuecli中chainWebpack的常用操作举例）

vue inspect > output.js

// loader 默认是从下往上处理 // enforce： 决定现有规则调用顺序 // - pre 优先处理 // - normal 正常处理（默认） // - inline 其次处理 // - post 最后处理 module.exports = { chainWebpack: config => { config.module .rule(lint) // 定义一个名叫 lint 的规则 .test(/\.js$/) // 设置 lint 的匹配正则 .pre() // 指定当前规则的调用优先级 .include // 设置当前规则的作用目录，只在当前目录下才执行当前规则 .add(src) .end() .use(eslint) // 指定一个名叫 eslint 的 loader 配置 .loader(eslint-loader) // 该配置使用 eslint-loader 作为处理 loader .options({ // 该 eslint-loader 的配置 rules: { semi: off } }) .end() .use(zidingyi) // 指定一个名叫 zidingyi 的 loader 配置 .loader(zidingyi-loader) // 该配置使用 zidingyi-loader 作为处理 loader .options({ // 该 zidingyi-loader 的配置 rules: { semi: off } }) config.module .rule(compile) .test(/\.js$/) .include .add(src) .add(test) .end() .use(babel) .loader(babel-loader) .options({ presets: [ [@babel/preset-env, { modules: false }] ] }) } }

{ module: { rules: [ /* config.module.rule(lint) */ { test: /\.js$/, enforce: pre, include: [src], use: [ /* config.module.rule(lint).use(eslint) */ { loader: eslint-loader, options: { rules: { semi: off } } }, /* config.module.rule(lint).use(zidingyi) */ { loader: zidingyi-loader, options: { rules: { semi: off } } } ] }, /* config.module.rule(compile) */ { test: /\.js$/, include: [src, test], use: [ /* config.module.rule(compile).use(babel) */ { loader: babel-loader, options: { presets: [ [@babel/preset-env, { modules: false }] ] } } ] } ] } }

module.exports = { chainWebpack: config => { // 用法： // config // .plugin(name) // .use(WebpackPlugin, args) // 示例： config .plugin(clean) // 创建一个名称为 clean 的插件 .use(CleanPlugin, [[dist], { root: /dir }]) // 不要用 new 去创建插件，因为已经为你做好了 } }

// 用法(v5版本可用)： config.optimization .minimizer(name) .use(WebpackPlugin, args) // 示例： config.optimization .minimizer(css) .use(OptimizeCSSAssetsPlugin, [{ cssProcessorOptions: { safe: true } }])

// vue.config.js module.exports = { chainWebpack: config => { const svgRule = config.module.rule(svg) // 清除已有规则 svg 的所有 loader。 // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。 svgRule.uses.clear() // 添加要替换的 loader svgRule .use(vue-svg-loader) .loader(vue-svg-loader) } }

// 删除前： { test: /\.m?jsx?$/, exclude: [ function () { /* omitted long function */ } ], use: [ /* config.module.rule(js).use(cache-loader) */ { loader: cache-loader, options: { cacheDirectory: D:\\webproject\\webapp-jy\\node_modules\\.cache\\babel-loader, cacheIdentifier: 519fc596 } }, /* config.module.rule(js).use(babel-loader) */ { loader: babel-loader } ] } // 删除后： const jsRule = config.module.rule(js) // 删除 cache-loader jsRule.uses.delete(cache-loader) { test: /\.m?jsx?$/, exclude: [ function () { /* omitted long function */ } ], use: [ /* config.module.rule(js).use(babel-loader) */ { loader: babel-loader } ] }

const moduleRule = config.module // 删除命名为 js 的规则 moduleRule.rules.delete(js)

config.plugins.delete(name)

config.optimization.minimizers.delete(name)

// 两种写法都可修改 config.module .rule(compile) .use(babel) .tap(options => merge(options, { plugins: [@babel/plugin-proposal-class-properties] })) config.module .rule(compile) .use(babel) .loader(babel-loader) .tap(options => merge(options, { plugins: [@babel/plugin-proposal-class-properties] }))

config.module.rule(js).toConfig(): // { // test: /\.m?jsx?$/, // exclude: [ [Function] ], // use: [ // { loader: cache-loader, options: [Object] }, // { loader: babel-loader } // ] // } // 这里以添加一个新的 loader 为例 // 1、拿到原来的 loader let originUse = config.module.rule(js).toConfig().use // 2、添加 loader let newLoader = { loader: eslint-loader } originUse.splice(1, 0, newLoader) // 3、清空原来的 loader config.module.rule(js).uses.clear() // 4、重新设置新的 loader config.module.rule(js).merge({ use: originUse}) // { // test: /\.m?jsx?$/, // exclude: [ [Function] ], // use: [ // { loader: cache-loader, options: [Object] }, // { loader: eslint-loader }, // { loader: babel-loader } // ] // }

// 用法： config.plugin(name) .tap(args => newArgs) // 示例： config.plugin(env) .tap(args => [...args, SECRET_KEY]) // 修改前： /* config.plugin(optimize-css) */ new OptimizeCssnanoPlugin( { sourceMap: false, cssnanoOptions: { preset: [ default, { mergeLonghand: false, cssDeclarationSorter: false } ] }, } ) // 修改后： config.plugin(optimize-css) .tap(args => { args[0].yy = 1 return args }) /* config.plugin(optimize-css) */ new OptimizeCssnanoPlugin( { sourceMap: false, cssnanoOptions: { preset: [ default, { mergeLonghand: false, cssDeclarationSorter: false } ] }, yy: 2 } ) config.plugin(optimize-css) .tap(args => { return [...args, { x: 1 }] }) /* config.plugin(optimize-css) */ new OptimizeCssnanoPlugin( { sourceMap: false, cssnanoOptions: { preset: [ default, { mergeLonghand: false, cssDeclarationSorter: false } ] } }, { x: 1 } )

config.plugin(name) .init((Plugin, args) => new Plugin(...args))

// 用法： // 在 otherName 之前调用 config .plugin(name) .before(otherName) // 在 otherName 之后调用 config .plugin(name) .after(otherName) // 示例： // 修改之前： [ /* config.plugin(named-chunks) */ new NamedChunksPlugin( function () { /* omitted long function */ } ), /* config.plugin(copy) */ new CopyWebpackPlugin( [] ) ] // 修改后： config.plugin(named-chunks) .after(copy) [ /* config.plugin(copy) */ new CopyWebpackPlugin( [] ), /* config.plugin(named-chunks) */ new NamedChunksPlugin( function () { /* omitted long function */ } ) ] config.plugin(copy) .before(named-chunks) [ /* config.plugin(copy) */ new CopyWebpackPlugin( [] ), /* config.plugin(named-chunks) */ new NamedChunksPlugin( function () { /* omitted long function */ } ) ]

// 用法（v5版本可用）： config.optimization .minimizer(name) .tap(args => newArgs) // 示例： config.optimization .minimizer(css) .tap(args => [...args, { cssProcessorOptions: { safe: false } }])

// 示例1： console.log(js config :>> , config.module.rule(js).toConfig()) js config :>> { test: /\.m?jsx?$/, exclude: [ [Function] ], use: [ { loader: cache-loader, options: [Object] }, { loader: babel-loader } ] } // *************************** // 示例2： console.log(cache-loader config :>> , config.module.rule(js).use(cache-loader).toConfig()) cache-loader config :>> { loader: cache-loader, options: { cacheDirectory: D:\\webproject\\myproject\\node_modules\\.cache\\babel-loader, cacheIdentifier: 20a97f42 } } // *************************** // 示例3： console.log(plugin config :>> , config.plugin(optimize-css).toConfig()) plugin config :>> OptimizeCssnanoPlugin { options: { sourceMap: false, cssnanoOptions: { preset: [Array] } } }

// 从 Map 移除所有 配置. clear() // 通过键值从 Map 移除单个配置. // key: * delete(key) // 获取 Map 中相应键的值 // key: * // returns: value get(key) // 获取 Map 中相应键的值 // 如果键在Map中不存在，则ChainedMap中该键的值会被配置为fn的返回值. // key: * // fn: Function () -> value // returns: value getOrCompute(key, fn) // 配置Map中 已存在的键的值 // key: * // value: * set(key, value) // Map中是否存在一个配置值的特定键，返回 真或假 // key: * // returns: Boolean has(key) // 返回 Map中已存储的所有值的数组 // returns: Array values() // 返回Map中全部配置的一个对象, 其中 键是这个对象属性，值是相应键的值， // 如果Map是空，返回 `undefined` // 使用 `.before() 或 .after()` 的ChainedMap, 则将按照属性名进行排序。 // returns: Object, undefined if empty entries() // 提供一个对象，这个对象的属性和值将 映射进 Map。 // 你也可以提供一个数组作为第二个参数以便忽略合并的属性名称。 // obj: Object // omit: Optional Array merge(obj, omit) // 对当前配置上下文执行函数。 // handler: Function -> ChainedMap // 一个把ChainedMap实例作为单个参数的函数 batch(handler) // 条件执行一个函数去继续配置 // condition: Boolean // whenTruthy: Function -> ChainedMap // 当条件为真，调用把ChainedMap实例作为单一参数传入的函数 // whenFalsy: Optional Function -> ChainedMap // 当条件为假，调用把ChainedMap实例作为单一参数传入的函数 when(condition, whenTruthy, whenFalsy)

// 添加/追加 给Set末尾位置一个值. // value: * add(value) // 添加 给Set开始位置一个值. // value: * prepend(value) // 移除Set中全部值. clear() // 移除Set中一个指定的值. // value: * delete(value) // 检测Set中是否存在一个值. // value: * // returns: Boolean has(value) // 返回Set中值的数组. // returns: Array values() // 连接给定的数组到 Set 尾部。 // arr: Array merge(arr) // 对当前配置上下文执行函数。 // handler: Function -> ChainedSet // 一个把 ChainedSet 实例作为单个参数的函数 batch(handler) // 条件执行一个函数去继续配置 // condition: Boolean // whenTruthy: Function -> ChainedSet // 当条件为真，调用把 ChainedSet 实例作为单一参数传入的函数 // whenFalsy: Optional Function -> ChainedSet // 当条件为假，调用把 ChainedSet 实例作为单一参数传入的函数 when(condition, whenTruthy, whenFalsy)

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。