webpack中Entry与Output的基础配置

时间:2021-07-06 12:43:11
entry顾名思义,就是打包的入口文件
module.exports = {
  // 这个文件要做打包,从哪一个文件开始打包
  entry: './src/index.js',   // 打包文件要放到哪里去,就配置在output这个对象里
  output: {
    // 打包好的文件名字
    filename: 'bundle.js',
    /**
    * 打包出的文件要把他放到哪一个文件夹下,path后面要放一个绝对路径
    * __dirname指的是webpack.config.js所在的当前目录的这个路径
    * 下面这个结合就是一个绝对路径
    */
    path: path.resolve(__dirname, 'dist')
  }
}
其中,
entry: './src/index.js'
等同于
entry: {
  main: './src/index.js'
}
打包生成的文件,默认的名字叫main。打包生成的文件叫做bundle.js,如果我把这个自定义的打包好的名字去掉。那么打包生成的名字是什么,是main.js。所以这个名字,就是打包生成的名字。
现在我有一个需求,我希望,这个index.js,反复生成两次,第一个文件叫做main,第二个文件叫做sub。打包生成的名字还是叫bundle
module.exports = {
  // 这个文件要做打包,从哪一个文件开始打包
  entry: {
    main: './src/index.js',
    sub:'./src/index.js'
  },   // 打包文件要放到哪里去,就配置在output这个对象里
  output: {
    // 打包好的文件名字
    filename: 'bundle.js',
    /**
    * 打包出的文件要把他放到哪一个文件夹下,path后面要放一个绝对路径
    * __dirname指的是webpack.config.js所在的当前目录的这个路径
    * 下面这个结合就是一个绝对路径
    */
    path: path.resolve(__dirname, 'dist')
  }
}

这个时候会报错,如图。

webpack中Entry与Output的基础配置

为什么呢?现在要用index.js生成两个文件,一个叫做main,一个叫sub,但是这两个文件最终都会被取名叫做bundle.js。这样取名就重复了。就冲突了,想要解决这个问题,我们把filename替换成一个占位符
output: {
  // 打包好的文件名字
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist')
}
这个就是打包相应的名字
但是一般我们做好的项目都会上传到线上,域名下到文件,这个时候自动生成的index.html里面的js路径不是我想要到,我想要在路径前面加上域名
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="sub.js"></script>
这个自动插入的js想变成这样
<script type="text/javascript" src="http://cdn.com/main.js"></script>
<script type="text/javascript" src="http://cdn.com/sub.js"></script>
我们可以在webpack里面配置一个内容
output: {
  publicPath: 'http://cdn.com.cn',
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist')
}
再去运行 npm run bundle。生成index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html template</title>
  </head>
  <body>
    <div id='root'></div>
    <script type="text/javascript" src="http://cdn.com.cn/main.js"></script>
    <script type="text/javascript" src="http://cdn.com.cn/sub.js"></script>
  </body>
</html>
会发现自动带了域名