Webpack学习笔记（一）资源输入输出配置

什么是webpack

webpack是一个现代javascript应用程序的静态模块打包工具。Webpack会从入口文件开始检索，并将具有依赖关系的模块生成一颗依赖树，最终得到一个chunk。由这个chunk得到的打包产物称之为bundle。

配置资源入口

webpack通过context和entry两个配置项共同决定入口文件的路径。配置资源入口，要做两件事情

告诉webpack从哪里开始打包。
定义chunk name。如果工程只有一个入口，chunk name默认为main。如果有多个入口，需要为每个入口定义chunk name。

context可以理解为资源入口的路径前缀，主要目的是让entry的配置更简洁。 entry的配置有多种形式：字符串、数组、对象、函数。可以根据不同的需求场景来选择。

字符串类型入口，直接传入文件路径。

module.exports = {
    context: path.join(__dirname, './src'),
    entry: './file.js'
};
复制代码

数组类型的入口，可以将多个资源优先合并，打包时会将数组的最后一个元素作为实际的入口文件。

module.exports = {
    context: path.join(__dirname, './src'),
    entry: ['babel-polyfill', './file.js']
};
复制代码

对象类型入口，用来定义多入口，对象的属性名是chunk name，属性值是入口文件。

module.exports = {
    entry: {
        index: './src/index.js',
        lib: './src/lib.js'
    }
};
复制代码

函数类型的入口，只要函数返回上面介绍的任何配置即可。

module.exports = {
    entry: () => ({
        index: './src/index.js',
        lib: './src/lib.js'
    })
};
复制代码

配置资源出口

资源输出的配置都集中在output对象里。如下：

module.exports = {
    entry: '/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'assets'),
        publicPath: '/dist/'
    }
};
复制代码

1.filename

filename的作用是控制输出资源的名称。filename可以是名称，也可以是相对路径。在多入口的场景中，我们需要为对应产生的每个bundle指定不同的名字，webpack支持动态地生成文件名。

module.exports = {
    entry: () => ({
        index: './src/index.js',
        lib: './src/lib.js'
    })，
    output: {
        filename: '[name].js'
    }
};
复制代码

filename中的[name]会被替换为chunk name,因此最后项目生成的资源是index.js和lib.js。除了[name]可以替代chunk name以外，还有[hash]、[chunkhash]、[id]、[query]模板变量。这些变量有如下两种作用：

当有多个chunk存在时对不同的chunk进行区分。如[name]、[chunkhash]、[id]
控制客户端缓存。[hash]、[chunkhash]都与chunk的内容直接相关，当chunk内容改变时，用户请求资源时，会立即下载新的版本而不会使用本地缓存。

2. path

path指定资源输出的位置，要求必须为绝对路径。webpack4之后，output.path默认为dist目录。

module.exports = {
    entry: () => ({
        index: './src/index.js',
        lib: './src/lib.js'
    })，
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist')
    }
};
复制代码

3. publicPath

publicPath容易与path混淆，从功能来讲，path用来指定资源的输出位置，而pubicPath则用来指定资源的请求位置。

输出位置：打包完成后资源产生的目录，一般将其指定为工程的dist目录。
请求位置：由js或者css所请求的间接资源路径。页面中的资源分两种，一种是有html页面直接请求的，比如通过script标签加载的js；另一种是由JS或CSS请求的，如异步加载JS、从css请求图片文字等。publicPath的作用就是指定这部分间接资源的请求位置。

publicPath有三种形式

publicPath指定为HTML的相对路径

//假设当前HTML地址为https://example.com/app/index.html
//异步加载资源名为0.chunk.js
publicPath:''//实际路径为，https://example.com/app/0.chunk.js
publicPath:'./js'//实际路径为，https://example.com/app/js/0.chunk.js
publicPath:'../assets'//实际路径为，https://example.com/assets/0.chunk.js
复制代码

publicPath指定为hostname的相对路径

//假设当前HTML地址为https://example.com/app/index.html
//异步加载资源名为0.chunk.js
publicPath:'/'//实际路径为，https://example.com/0.chunk.js
publicPath:'/js/'//实际路径为，https://example.com/js/0.chunk.js
publicPath:'/assets/'//实际路径为，https://example.com/assets/0.chunk.js
复制代码

publicPath指定为CDN的相对路径。

//假设当前HTML地址为https://example.com/app/index.html
//异步加载资源名为0.chunk.js
publicPath:'http://cdn.com/'//实际路径为，https://http://cdn.com/0.chunk.js
复制代码

注意： webpack-dev-server的配置中也有一个publicPath，他的作用是指定webpack-dev-server的静态资源服务路径。如下代码，需要访问localhost:3000/assets/才能得到我们想要的结果。

module.exports = {
    entry: () => ({
        index: './src/index.js',
        lib: './src/lib.js'
    })，
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist')
    },
    devServer: {
        publicPath: '/assets/',
        port:3000
    }
};
复制代码