webpack学习8-配置对象常用属性详解

1. entry

1. 配置为字符串，单一文件输出， 针对单页面

 entry: './src/index.js',

2. 配置为数组，多文件输入，单文件输出， 针对 hmr 中html 不更新的情况

 entry: [ './src/index.js','./src/print.js'],

3. 配置为对象{} 输出多个文件 ，key就是文件名 ，针对多页面 类似于jq的老式前端应用

entry: {
        index: './src/index.js',
        print: './src/print.js'
    },

4. 特殊用法 复合嵌套用法 针对在webpack.dll.js中的entry上 一个包名可以配置多个包

entry:{
        // 最终的打包生产的名字 ： npm包名
        jquery: ['jquery'] // 可以打多个相关的库进去，一般一个
    },

2. output

1. filename:‘index[contenthash:10].js’ // 生产的文件名

2. path: resolve(__dirname,‘dist’) // 生产的文件路径

3. publicPath: ‘/’ // 服务器环境下的公共路径

4. chunkFileName:‘js/[name].chunk.js’ // 一些文件名

有两种情况可以生产 chunkFilename

1. import() 动态引入

2. optimization 切割代码

   optimization:{
        splitChunks:{
            chunks: 'all'
        }
    }

5. library: [name] // 整个库向外暴露的名字， 一般用于dll

6. libraryTarget: ‘windows’ || ‘golobal’ || ‘commonjs’ || ‘amd’ // 包挂载的对象

3. module

1. test: /.js$/, // 针对什么后缀的文件去匹配处理

2. use: [] // 使用多个loader来处理

3. loader: ‘’ // 针对单个loader来处理， 也作为单个loader的展开详细配置

4. options: [] // 其他配置项

5. exclude:’/node_modules/’, // 排除文件夹处理

6. include:’./src/’, // 只处理 文件夹下的东西

7. enforce: ‘pre’ | ‘post’ // 在最前 | 最后处理 如果不设置就是按照自然顺利执行

8. oneOf: [‘loader1’，‘loader2’] // 在这里的loader 每个文件只会匹配到其中一个 属于优化范畴

4. resolve

1. alias:{}, // 路径别名

 alias: {
            '@': resolve(__dirname,'src')
        },

2. extensions: [’.js’,‘jsx’,‘ts’,‘tsx’]

省略文件后缀名， 注意的是，统一文件名，只会解析第一个， 所以如果用这个功能，注意同名不同文件起名不要一样

3. modules: [resolve(__dirname,’./node_modules’), ‘node_modules’]

// 解析到node_modules 就去’./node_modules’ 下找 ，解约时间

5. devServer

1. contentBase: ‘./dist’, // 代码运行的目录

2. watchContentBase: true, // 代码运行的目录发生改变就更新

3. compress: true, // 启动gzip压缩

4. port:3111, // 启动端口

5. open:true, // 自动打开浏览器

6. hot:true, // 热模块替换

7. inline: true, // 检测到代码更新后reload

8. host:‘localhost’, // 此域名下打开

9. proxy: {}, // 代理

10. overlay:true // 开启全屏幕报错

6. optimization

1. splitChunks 设置 chunks 为’all’ 意味着 chunk 可以在异步和非异步 chunk 之间共享

 splitChunks: {
      // include all types of chunks
      chunks: 'all',
    },

2. runtimeChunk

单独抽离chunk的名字出来runtimechunkname， 为了优化chunk缓存，因为chunk的名字改变 所以引用chunk的包也会改变

runtimeChunk: { 
   name: (entrypoint) => `runtime~${entrypoint.name}`,
        }