03-04.Entry与Output的基础配置

Entry与Output的基础配置

当我们在使用webpack进行打包的时候，使用entry来定义我们的入口文件，使用output来定义我们的输出文件。
通常情况下entry可以接受一个字符串作为参数，定义我们需要进行打包编译的入口文件。

const path = require('path')

module.exports = {
  // 定义入口文件
  entry: path.resolve(__dirname, "src/index.js"),
}

当我们在用这种配置进行打包的时候，webpack会在项目的根目录下创建dist目录，同时将entry定义的文件打包编译为到其中命名为main.js。上面的配置等价于：

const path = require('path')

module.exports = {
  // 定义入口文件
  entry: {
    main: path.resolve(__dirname, "src/index.js")
  }
}

配置多入口打包

有的时候我们需要对多个入口文件进行打包，并输入成多个编译文件，部署到CDN上被index.html文件引用，这时候我们就需要修改wepack.config.js的配置了。（/source_code/03/03-06/webpack.config.2.js）

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  // 定义多入口打包
  entry: {
    main: path.resolve(__dirname, "src/index.js"),
    sub: path.resolve(__dirname, "src/index.js")
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "dist"),
    publicPath: 'http://cdn.com.cn'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html")
    })
  ]
}

这时在进行打包，就可以看到，我们输出的index.html就按照我们的需要，引入了目标文件

文档阅读

• wepack文档：output
• wepack文档：entry-context
• wepack文档：output-management 重点阅读
• HtmlWebpackPlugin Github