webpack.config.js解剖

webpack

在开发过程中，webpack是一一款模块化开发编译打包的一款利器，下面我们对webpack的一些配置进行一些解剖式的学习吧！
var webapck =require("webpack); var path=require("path"); modules.export={ devtool: 'source-map', entry: [ './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, }
在上面这部分代码中：
devtool:

entry

bundle的入口文件

• 如果传入一个字符串，这个字符串就会被解析为启动时加载的模块。
• 如果传入个数组，所有模块都是启动时加载，模块导出到最后一个里面,即把多个文件打包合并成一个
  entry: ["./entry1", "./entry2"]
• 如果传入一个对象，就会创建多个输入包文件，对象键值就chunk的name，值可以是字符串或者是数组。

  entry: {
      page1: "./page1",
      page2: ["./entry1", "./entry2"]
  },
  output: {
      // 当使用多入口文件时候，要确保在output.filename使用[name]或者[id]
      filename: "[name].bundle.js",
      chunkFilename: "[id].bundle.js"
  }
}

注意: 没有别的专门来配置入口点的选项。如果你需要一个专门来配置入口点的配置对象，你需要用到××多个配置对象××

output

output是影响编译输出的选项。output选项告诉webpack怎么把编译文件写入磁盘。注意，虽然可以有很多输入口，但是只有一个输出配置

如果使用了哈希([hash] 或者 [chunkhash]), 需要确保有一个一致的模块顺序。使用OccurenceOrderPlugin插件或者 recordsPath。(译者：参看这个issue)

output.filename

指定输出到硬盘的文件的文件名。这里必须是相对路径

单一入口：

{
    entry:  "./src/app.js",
    output: {
        filename:"bundle.js",
        path:"./build"
     }
}

多入口

如果带有多个入口点，或者使用了CommonsChunkPlugin这样的插件，你应该使用替换符来为每个文件命名一个为一个名字。
[name] 被chunk的名字替换。
[hash] 被编译器hash替换。
[chunkhash]被chunk的hash替换

  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/built'
  }
}

// 输出到磁盘: ./built/app.js, ./built/search.js

output.path

绝对路径（required）
[hash]被编译后 文件的hash替换

output.publicPath

publicPath指定了一个在浏览器中被引用的URL地址。对于使用