webpack的安装、配置和基础打包

webpack的安装、配置和基础打包

一，官网下载node.js并安装好：https://nodejs.org/en/download/

二，安装webpack
win+r输入cmd在终端安装webpack：
（这里是全局安装，推荐指定版本号3.6.0，因为vue cli2依赖该版本）

npm install webpack@3.6.0 -g

如果想要局部安装，就到对应项目终端输入：

npm install webpack@3.6.0 --save-dev

（–save-dev指开发时依赖，项目打包后不需要继续使用）

注意： 如果你的电脑项目终端禁止运行脚本，输入get-executionpolicy，如果返回Restricted为不可运行，通过set-ExecutionPolicy RemoteSigned命令修改，RemoteSigned为可运行

三.创建项目
（1）创建文件夹和文件规范：

文件和文件夹解析：
dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件
main.js：项目的入口文件。
mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用
index.html：浏览器打开展示的首页html
package.json：在对应项目终端输入npm init自动生成的，设置name后一路回车
webpack.config.js:定义出口和入口

（如果有其他文件（如.css、.less、img等文件）依赖在终端输入npm install进行加载）

mathUtils.js代码：

function add(num1,num2){
	return num1+num2
}

module.exports = {	//导出函数
	add
}

main.js代码

const{add} = require("./js/mathUtils.js")	 //commcon js的模块化,导入函数

console.log(add(2,3));

（2）配置webpack.config.js文件

const path = require("path")	//先导入模块

module.exports={
	entry:'./src/main.js',	//出口
	output：{					//入口
		//动态获取路径，__dirname为全局变量
		path:path.resolve(__dirname,'dist'),	
		//打包后文件名
		filename:'bundle.js'	
	}
}

（3）打开package.json文件：
在scripts对象中设置"buile":"webpack"映射，同等于执行webpack打包，在项目终端执行webpack命令为全局打包，如果在package.json里定义一个buile脚本会优先执行本地

（4）打包：在项目终端输入npm run build进行打包，dist文件夹中就会自动生成打包好的bundle.js文件，只要将这个打包好的文件在index.html映入即可