webpack-配置参数解析（上）

webpack
字数统计: 1.7k字   |   阅读时长≈ 8分钟

entry

入口对象entry用于webpack查找开始构建bundle的地方，配置方法有多种形式

默认为：./src/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports={
    //配置入口
    //字符串形式
    entry: "./src/index.js",    
    //字符串数组形式
    entry: ['./src/index.js'],
    //对象形式
    entry: {
         main: './src/index.js',
    },  
    //多入口形式
    entry:{                  
         main: './src/index.js',
         main2: './src/index2.js',
    }
    //动态入口
    /* 当需要根据请求来编译文件做到懒加载打包输出，则使用动态入口*/
    entry: () => new Promise((resolve) => resolve('./src/index.js'))
}

context

上下文context配置webpack的基础目录，用于从配置中解析入口起点和loader

默认为：process.cwd()

1
2
3
4
5
const path = require('path');
module.exports={
    context: path.resolve(__dirname,'./src'),// context 上下文指向 src 目录
    entry: () => new Promise((resolve) =>resolve('./index.js')),// 利用方法返回一个异步的入口
};

mode

选项mode告知webpack使用相应环境。可能的值：none、development、production（默认）

生产配置Production

生产模式用于项目上线发布，打包后生成的dist/main.js文件无法被识别，压缩代码，关闭输出Console、Debugger，设置process.env.NODE_ENV为production

1
2
3
4
5
6
const path = require('path');
module.exports={
    context: path.resolve(__dirname,'./src'),// context 上下文指向 src 目录
    entry: () => new Promise((resolve) =>resolve('./index.js')),// 利用方法返回一个异步的入口
    mode: 'production',//默认模式
};

打包后dist/main.js文件：

production模式

开发配置Development

开发模式用于日常开发调试，打包后生成的dist/main.js文件代码清晰并添加了sourcemap，不考虑加载速度等，设置process.env.NODE_ENV为development

1
2
3
4
5
6
const path = require('path');
module.exports={
    context: path.resolve(__dirname,'./src'),// context 上下文指向 src 目录
    entry: () => new Promise((resolve) =>resolve('./index.js')),// 利用方法返回一个异步的入口
    mode: 'development',
};

打包后dist/main.js文件：

development模式

不使用webpack默认mode配置None

将mode设置为none则不实用webpack的默认mode配置，生成的dist/main.js文件与development模式相比少了sourcemap的生成

1
2
3
4
5
6
const path = require('path');
module.exports={
    context: path.resolve(__dirname,'./src'),// context 上下文指向 src 目录
    entry: () => new Promise((resolve) =>resolve('./index.js')),// 利用方法返回一个异步的入口
    mode: 'none',
};

打包后dist/main.js文件：

development模式

output

配置output包含一组选项，指示webpack如何输出及在哪输出bundle、asset和其他导报webpack载入的内容

path

path为文件输出目录，对应一个绝对路径

1
2
3
4
5
6
7
8
9
const path = require('path');
module.exports={
    context: path.resolve(__dirname,'./src'),// context 上下文指向 src 目录
    entry: () => new Promise((resolve) =>resolve('./index.js')),// 利用方法返回一个异步的入口
    mode: 'production',//默认模式
    output: {
        path: path.resolve(__dirname,'./lib'),//修改输出路径为 “webpack_demo/lib”
    }
};

pathinfo

pathinfo告知webpack在bundle中引入所包含模块信息的相关注释，在development模式中默认为true，在production模式中默认为false

1
2
3
4
5
6
7
8
9
10
const path = require('path');
module.exports={
    context: path.resolve(__dirname,'./src'),// context 上下文指向 src 目录
    entry: () => new Promise((resolve) =>resolve('./index.js')),// 利用方法返回一个异步的入口
    mode: 'production',//默认模式
    output: {
        path: path.resolve(__dirname,'./lib'),//修改输出路径为 “webpack_demo/lib”
        pathinfo: true,//打开pathinfo
    }
};

注释为：

pathinfo

在分析bundle包时查看此注释可以了解当前module的依赖组成

publicPath

当需要按需加载或加载外部资源，使用publicPath指定外部资源的路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const path = require('path');

module.exports = {
  mode: 'development', // 测试环境
  context: path.resolve(__dirname, './src'), // context 上下文指向 src 目录
  entry: () => new Promise((resolve) => resolve('./index.js')), // 利用方法返回一个异步的入口
  output: {
    path: path.resolve(__dirname, './lib'), // 修改输出路径为 “sy_webpack-config/lib”
    publicPath: './lib/', // 配置公共路径
  },
};

//可以在入口文件使用运行时的变量__webpack_public_path__指定
document.write('hello webpack！');

// 动态设置 webpack 的 publicpath 路径
__webpack_public_path__ = './lib/';

// 按需引入 girl.js 文件
import('./demo').then((result) => {
  result.default(); // 满足 demo 的需求
});

filename

选项filename用于修改输出文件的名称

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require('path');
module.exports={
    context: path.resolve(__dirname,'./src'),// context 上下文指向 src 目录
    entry: () => new Promise((resolve) =>resolve('./index.js')),// 利用方法返回一个异步的入口
    mode: 'production',//默认模式
    output: {
        path: path.resolve(__dirname,'./lib'),//修改输出路径为 “webpack_demo/lib”
        pathinfo: true,//打开pathinfo
        filename: 'oubput.js',//单入口文件配置
    }
};
//多入口文件配置
filename: '[name].js',//输出文件为main1.js，main2.js，name默认为当前module文件名

chunkFilename

选项chunkFilename决定非入口chunk文件的名称，不能配置为方法，其他与filename一致

library

用于封装自己的函数库或ui库或二次封装并暴露给外界使用

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require('path');

module.exports = {
  mode: 'production',
  context: path.resolve(__dirname, '.'),
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './lib'),
    library: 'webpackSay',
    libraryExport: 'default',
    libraryTarget: 'var',
  },
};

  • library：封装后打包的名字

  • libraryTarget: 配置暴露给外界的方式，即输出的格式

    • 生成一个变量

      • var：libraryTarget的默认值，将库入口的返回值生成一个变量

        1
        2
        //输出main.js为
        var webpackSay=function(e){ ... }

      • assign：产生一个隐含的全局变量。

        1
        webpackSay=function(e){ ... }

    • 生成对象的属性

      • this：将生成的变量赋值给this对象，作为它的属性

      • window：返回值赋值为window的一个属性

      • global：返回值赋值给global的一个属性

        1
        2
        3
        this['webpackSay']=function(e){...}
        window['webpackSay']=function(e){...}
        global['webpackSay']=function(e){...}

    • 按不同模块生成

      • commonjs/commonjs2：暴露为CommonJS模块

        1
        2
        3
        4
        //commonjs
        exports['webpackSay'] = function(e){ ... }
        //commonjs2，该方式会直接忽略library的值
        module.exports = function(e){ ... }

      • amd：暴露为amd模块，需要指定library

        1
        2
        3
        define('webpackSay', [], function(){
            return function(e){ ... };
        });

      • umd：暴露为所有模块定义下都可运行的方式，需要指定library

    • 生成为JSONP：将返回值封装到一个JSONP容器中

      1
      webpackSay(function(e){ ... });

  • libraryExport：默认要导出模块的哪个部分

  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • © 2020-2024 Aweso Lynn
  • PV: UV: