webpack是前端一款流行的打包插件,而且升级比较快,同时在面试的过程中也经常会遇到webpack的相关问题,今天就总结一下常问的问题之一,也是小白学习webpack的第一步:配置打包文件的出入口。
webpack如何配置出入口?-QUI-Notes

步骤

1.新建build/webpack.common.js

2.在文件中配置入口
可配置多个入口。但开发中一般是react或vue,为单页面web应用(SPA),入口一个即可。

const path = require('path')
module.exports = {
  entry: path.resolve(__dirname, "../src/main.js"),
}

3.在文件中配置出口
只能有一个出口,这里指定输出路径为'dist'

module.exports = {
  output: {
    path:path.resolve(__dirname,'../dist'),
    filename: '[name].bundle.js',
    clean:true //每次构建清除dist包
  },
}

4.在package.json文件中,我们创建一个运行webpack命令构建脚本

"scripts": {
  "build":"webpack --config build/webpack.common.js",
}

5.运行打包命令,就会在dist文件生成main.bundle.js文件了

npm run build