当前位置：首页 > article >正文

前端工程化之：webpack1-11(其他配置)

article 2024/11/29 14:47:31

一、context

二、output

1.library

2.libraryTarget

三、target

四、module.noParse

五、resolve

1.modules

2.extensions

3.alias

六、externals

七、stats

一、context

context: path.resolve(__dirname, "app")

该配置会影响入口和 loaders 的解析，入口和 loaders 的相对路径会以 context 的配置作为基准路径，这样，你的配置会独立于 CWD (current working directory 当前执行路径)。

var path = require("path");
module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        index: "./index.js", // 利用context相当于是"./src/index.js"
        a: "./a.js"
    },
    context: path.resolve(_dirname,"src")
}

二、output

1.library

library: "abc"

这样一来，打包后的结果中，会将自执行函数的执行结果暴露给 abc ,类似 jq 一样供外部调用的接口。

src/index.js ：

module.exports = function print(){
	console.log("print");
}

dist/main.js ：

var abc = (function (module){})({"./src/index.js": ...})

2.libraryTarget

libraryTarget: "var"

该配置可以更加精细的控制如何暴露入口包的导出结果。

其他可用的值有：

var：默认值，暴露给一个普通变量
window：暴露给 window 对象的一个属性
this：暴露给 this 的一个属性
global：暴露给 global 的一个属性
commonjs：暴露给 exports 的一个属性
其他：https://www.webpackjs.com/configuration/output/#output-librarytarget

三、target

target:"web" //默认值

module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        index: "./index.js", // 利用context相当于是"./src/index.js"
    },
    context: path.resolve(_dirname,"src"),
    target:"node" //打包后的代码运行在node环境中
}

设置打包结果最终要运行的环境，常用值有：

web：打包后的代码运行在 web 环境中；
node：打包后的代码运行在 node 环境中；
其他：https://www.webpackjs.com/configuration/target/。

四、module.noParse

noParse: /jquery/ // 不再分析依赖、抽象语法树
noParse: /a\.js$/ //不对a模块做任何操作，直接将其源代码放置到模块内容中

不解析正则表达式匹配的模块，通常用它来忽略那些大型的单模块库，以提高构建性能。

五、resolve

resolve 的相关配置主要用于控制模块解析过程。

1.modules

modules: ["node_modules"]  //模块的查找位置，默认值，可以多个值

当解析模块时，如果遇到导入语句， require("test") (没有指定具体路径)， webpack 会从下面的位置寻找依赖的模块：

当前目录下的 node_modules 目录
上级目录下的 node_modules 目录
…

对于 require(...) 是在 webpack 环境中去寻找该包，且不管在什么代码中，出现 require 就会寻找并解析成语法树。

2.extensions

extensions: [".js", ".json"]  //默认值

当解析模块时，遇到无具体后缀的导入语句，例如 require("test") ，会依次测试它的后缀名：

test.js
test.json

webpack 会根据 extensions 的配置自动补全后缀名。

3.alias

alias: {
  "@": path.resolve(__dirname, 'src'),
  "_": __dirname
}

src/index.js ：

require('./src/a/b/c/d.js');
//require('@/d.js');

有了 alias（别名）后，导入语句中可以加入配置的键名，例如 require("@/abc.js") ， webpack 会将其看作是 require (src的绝对路径+"@/abc.js")。

在大型系统中，源码结构往往比较深和复杂，别名配置可以让我们更加方便的导入依赖

六、externals

externals: {
    jquery: "$",
    lodash: "_"
}

从最终的 bundle 中排除掉配置的配置的源码，例如，入口模块是：

index.js ：

require("jquery")
require("lodash")

生成的 bundle 是：

(function(){
    ...
})({
    "./src/index.js": function(module, exports, __webpack_require__){
        __webpack_require__("jquery")
        __webpack_require__("lodash")
    },
    "jquery": function(module, exports){
        //jquery的大量源码
    },
    "lodash": function(module, exports){
        //lodash的大量源码
    },
})

但有了上面的配置后，则变成了：

(function(){
    ...
})({
    "./src/index.js": function(module, exports, __webpack_require__){
        __webpack_require__("jquery")
        __webpack_require__("lodash")
    },
    "jquery": function(module, exports){
        module.exports = $;
    },
    "lodash": function(module, exports){
        module.exports = _;
    },
})

这比较适用于一些第三方库来自于外部 CDN 的情况，这样一来，即可以在页面中使用 CDN ，又让 bundle 的体积变得更小，还不影响源码的编写。