webpack 打包 归纳整理

开始步骤
1、创建一个项目 在空项目中运行 npm init -y 快速初始化一个包管理文件
2、自动创建出一个 package.json
3、创建一个src原代码目录
4、src创建一个index.html 里面写代码结构
5、运行 npm i jquery -s 安装jq
6、src目录下创建一个index.js 文件 通过 import $ from ‘jquery’ 导入jq
7、index.html 引入jq.js

此时 运行代码的时候 并没有出现我们想要的结果 原因是 es6语法不支持，报错 所以需要使用webpack打包工具

安装配置 webpack
1、运行 npm install webpack webpack-cli -D ,安装webpack相关的包
在这了我使用npm的时候一直报错，所以采用了cnpm 安装成功了
2、在项目根目录创建名为webpack.config.js 的 webpack 配置文件
3、在webpack 配置文件中，初始化如下基本配置

	module.exports = {
		mode:'development' // mode 用来指定构建模式,转换速度快慢， 一般开发项目使用 development ,上线项目使用 production
	}

4、在package.json 配置文件中script 节点下,新增dev脚本

	"scripts":{
		"dev":"webpack" // script 节点下的脚本，可以通过npm run 运行
	}

5、在终端运行 npm run dev 命令 启动webpack 进行项目打包 打包成功

6、index.html 引入打包成功后的 dist/main.js

webpack 基础使用
1、配置打包的入口出口

//webpack 的4.x版本中默认约定
//打包的入口文件为 src--> index.js
//打包的出口文件为 src--> main.js

//如果要手动修改打包的入出口文件，可在webpack.config.js中新增配置信息

const path = require('path') // 导入node.js 中专门操作路径的模块
module.exports = {
	// 编译模式
	mode:'development',  //production  一般开发项目使用 development ,上线项目使用 production
	entry:path.join(__dirname,'./src/index.js'), //打包入口文件的路径
	output:{
		path:path.join(__dirname,'./dist'), //输出文件的存放路径
		filename:'bundle.js'  //输出