Webpack入门之项目的初始化

Webpack入门之项目的初始化

一、开发环境与开发工具

• 在使用Webpacke需要先安装Node.js，因为Webpack是基于Node开发出来，所以必须安装，并且开发工具这里使用的Visual Studio Code

二、创建项目

• 创建一个任意的文件
  注意：请不要使用中文名称
  
• 使用vsCode打开
  
• 在项目下创建src源码目录
  
• 打开终端并使用 【npm init -y】初始化项目
  
• 在src目录下创建主页和main.js文件

三、使用webpack管理项目

• 使用 【npm install webpack webpack-cli -D】 这里使用的本地安装模式，所以是-D，请区分全局安装模式的 -g
  
• 在项目根目录中创建webpack.config.js文件，并配置webpack.config.js文件如下

//导入Node的path模块
const path=require('path')

module.exports={
	
	//入口文件
    entry:path.join(__dirname,'./src/main.js'),
	//输出文件
    output:{
		//输入文件夹，若没有改文件夹会自动创建
        path:path.join(__dirname,'./dist'),
		//输出的文件名
        filename:'bundle.js'
    },
	//选择开发模式
    mode:'development',

}

• 在package.json的scripts阶段配置运行脚本

• 使用指令 【 npm run build】指令运行脚本
  

• 运行该脚本的作用是将main.js中的代码进行编译后转换为bundle.js文件，刚开始我也搞不懂为啥要转换，为啥不直接用。主要是因为如果我们使用Vue进行开发， 常常需要导入一些模块，其指令类似于Node，但是我们的HTML不认识这些指令，所以就使用webpack来帮我们将这些HTML不认识的代码进行适当转换，其缺点就是每修改一次main.js中的代码就需要运行一次脚本，当然，到了后面这个问题我们可以使用webpack-server这个工具来进行替代这一过程，请敬请期待吧！！