webpack - 三（解析打包输出内容）

接着上一篇文章来，之前我们在webpack.config.js 中简单的配置了一个webpack模块打包文件，打包之后，会出现一些提示及一个警告，这篇文章介绍的分别是什么意思，以及如何解决这个警告。

const path = require('path')
module.exports = {
    entry: './src/web.js',
    output: {
        filename: 'index.js', 
        path: path.resolve(__dirname, 'dist') 
    },

}

打包之后：

上边几个参数:

hash:  打包时使用的哈希值；

Version:  每次打包时使用的webpack的版本号；

Time:  当前包的整体打包耗时；

Build at:  打包的时间；

Asset:  打包出来的文件的名字；

Size:  打包出来的文件的大小；

Chunks: 它里边放的是每一个js文件对应的id值；

Chunk Names: 每一个js文件对应的名字，main其实是入口文件对应的key，（下边有例子）

EntryPoint: 打包的入口文件是main对应的文件

实际上，我们之前在webpack.config.js中entry对象中配置的入口文件都是简写，完整的写法儿是：

const path = require('path')
module.exports = {
  entry:{
    main:'./src/web.js'
  },
  output:{
    filename:'index.js',
    path:path.resolve(__dirname, 'dist')
  }
}

 

警告：

大体意思是，在webpack配置时，没有指定一个模式，（  开发环境 或 生产/上线环境  ），其实webpack设置的默认打包的环境为生产环境，我们可以通过配置mode这个属性来定义打包的环境。

生产环境：代码会被压缩（mode:production）；开发环境：代码不会被压缩( mode:development )。

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/web.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },

}

配置完mode之后，在打包时，就没有警告了：