Webpack--Output

output配置如何输出最终想要的代码.output是一个object,与出口相关的配置都集中在output对象中

filename

控制输出资源的文件名，其形式为字符串

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
    }
}

filename的值也可以是带路径的一个字符串，如果路径中的文件夹不存在就自动生成这个文件夹

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'./js/bundle.js',   //构建之后就会生成一个js文件夹
    }
}

也可以使用内置变量来定义filename

module.exports = {
    entry:{
        app:'./src/app.js',
        lib:'./src/lib.js',
    },
    output:{
        filename:'[name].js',
    }
}

内置变量

变量名称	功能描述
hash	指代webpack此次打包所有资源生成的hash
chunkhash	指代当前chunk内容的hash
id	指代当前chunk的id
query	指代filename配置项中的query
内置变量有两个作用

• 当有多个chunk存在时对不同的chunk进行区分。如[name],[chunkname]和[id]。它们对于每个chunk都是不一样的。
• 控制客户端缓存。表中[hash]和[chunkhash]都与chunk内容直接相关，在filename中使用了这些变量后，当chunk的内容改变时，可以同时引起资源文件名的更改，从而使用户在下一次请求资源文件时会立即下载新版本而不会

更新缓存一般只用在生产环境的配置下，在开发环境中可以不必配置[chunkhash]，

path

指定资源输出位置,要求值必须为绝对路径

modul.exports = {
    context:path.join(__dirname,'./src'),
    entry:'./main.js',
    output:{
        filename:'[name]@[chunkname].js',
        path:path.join(__dirname,'dist'),
    }
}

publicPath

用于指定按需加载或加载外部资源(图片,文件等)的访问路径
该选项的值是以runtime(运行时)或loader(载入时)所创建的每个URL为前缀。因此，在多数情况下，此选项的值都会以/结束。

publicPath有3种形式配置

与HTML相关

将publicPath设置为HTML的相对路径。在请求这些资源时会以当前页面HTML所在路径上加上相对路径

//假如当前HTML路径为　https://example.com/app/index.html
//异步加载的资源名为0.bundle.js
publicPath:'',      //https://example.com/app/0.bundle.js
publicPath:'./js'   //https://example.com/app/js/0.bundle.js
publicPath:'../aseets/'  //https://example.com/assets/0.bundle.js

与Host相关

若publicPath的值以/,开始，则代表此时publicPath是以当前页面的host name为基础

//假设当前HTML地址为　https://example.com/app/index.js
//异步加载的资源名为0.chunk.js
publicPath:'/'   //https://example.com/0.chunk.js
publicPath:'/js/'  //https://example.com/js/0.chunk.js
publicPath:'/dist/   //https://example.com/dist/0.chunk.js

CDN相关

由于CDN域名与当前域名不一样，需要以绝对路径的形式进行指定

//假如当前HTML路径为　https://example.com/app/index.html
//异步加载的资源名为0.bundle.js
publicPath:'http://cdn.com',      //http://cdn.com/0.bundle.js
publicPath:'https://cdn.com'   //https://cdn.com/0.bundle.js
publicPath:'//cdn.com/assets/'  // //cdn.com/assets/0.bundle.js

webpack-dev-server中的publicPath

这里的publicPath选项用于指定静态资源服务路径
为了避免开发环境和生产环境不一致而造成开发者的疑惑，可以将webpack-dev-server的publicPath与Webpack中的output.path保持一致

module.exports = {
    context:path.join(__dirname,'./src'),
    entry:'./main.js',
    output:{
        filename:'[name]@[chunkname].js',
        path:path.join(__dirname,'dist'),
    },
    mode:'development',
    devServer:{
         publicPath:'/dist/',
         port:3000,  
    },
}

文章内容整理于:《深入浅出 Webpack》、《Webpack实战：入门、进阶与调优》与Webpack官网