webpack在项目中的基本使用

1.在项目中安装和配置webpack

1. 运行npm install webpack webpack-cli -D命令，安装webpack相关包
2. 在项目目录中，创建名为webpack.config.js的webpacck配置文件
3. 在webpack的配置文件中，初始化如下基本配置:

module.exports = {
	mode: 'development', //production模式和development模式	
}

4. 在package.json配置文件中的scripts节点下，新增dev脚本如下:

"scripts":{
"dev":"webpack"
}

5. 在终端执行npm run dev命令，启动webpack进行项目打包

2.配置打包的入口与出口

1. webpack 的4.x版本中默认约定：
   • 打包入口文件为 src–>index.js
   • 打包出口文件为src–>main.js
2. 如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息：

const path = require('path')//导入node.js中路径模块
module.exports = {
	mode: 'development', //production模式和development模式
	entry: path.join(__dirname, './src/index.js'),//打包入口文件路径
	output: {
		path: path.join(__dirname, './dist'),//输出文件的存放路径
		filename: 'bundle.js'//输出文件名称
	}
}