前端知识7:webpack的核心概念以及webpack.config.js的基础模板

webpack ./src/index.js -o ./build/ --mode development 指定打包后为build目录 还有很多这个参数要配置，那么这种方式就太麻烦了，使用配置文件来解决。

创建webapck.config.js文件 这是默认的文件名称 如果不叫这个名称的话 那就是要在命令的时候声明一下配置文件的路径和名称
在src同级目录下添加改文件，并且添加如下内容：
module.exports={
mode:“development”
}

输入webpack 命令 直接打包开发模式 将development 换为production 就是打包生产模式
webpack命令会默认从src同级找webpack.config.js文件的

这个地方踩过坑：webpack命令不是内容命令 所以webpack和webpack-cli要全局安装。
然后每个项目还得安装一次 命令如下：npm i webpack webpack-cli -D

同时还要指定环境变量为自己创建的全局node-global 文件夹以及webpack.config.js文件的名称和位置一定要搞对。

webapck.config.js文件内容的解释：
entry:"./src/index.js",//打包的入口 表示从那个文件开始打包

“output”:{//输出的目录
filename:“build.js”, //输出的文件
path:resolve(__dirname,“build”),//输出的目录 找项目的根目录打包 所以需要导入一个path包专门处理路径的问题 __dirname是path包中的一个变量 就不再是dist目录了 而是build目录
}

loader: //webpack只能够处理js和json文件 所以通过loader让webpack去理解非js和json文件 如html css img等
plugins: //plugins 插件可以配合loader也能单独完成 下载一些插件

webpack.config.js的基础模板：
const {resolve} = require(‘path’)
module.exports={
mode:“production”,
entry:"./src/index.js",
“output”:{//输出的目录
filename:“build.js”,
path:resolve(__dirname,“build”)
}，
// loader: //webpack只能够处理js和json文件 所以通过loader让webpack去理解非js和json文件 如html css img等
module:{
rules:[
]
},
plugins:[
]
}