webpack4.+的使用（一）(webpack的基本使用)

最新推荐文章于 2024-07-28 00:56:04 发布

菜鸟分享录

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量341

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40600379/article/details/104336858

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

webpack4.+的使用（一）

一、webpack的基本使用

1、安装和卸载webpack开发依赖的命令分别为：npm install webpack -g和npm uninstall webpack -g（npm命令是在安装了node.js后才有的，故应预先装了node.js）

2、在cmd中进入当前项目目录，并在当前项目中输入npm install webpack -g和npm install webpack-cli -g安装webpack开发依赖（注意，应先安装全局的webpack，否则在局部文件夹中使用会报错）。

在这里插入图片描述

3、在当前目录下新建entry.js、index.html，并在两个文件中输入以下代码：

//entry.js
document.write("Hello world");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是webpack的第一次使用</title>
	</head>
	<body>
		<div id="app"></div>
        <!--这个文件是待会使用命令生成在根目录的文件-->
		<script src="./bundle.js"></script>
	</body>
</html>

4、如果安装完webpack后目录中没有package.json文件，那么就在命令行中输入npm init --yes即可初始化package.json（此时项目目录中可以看到该文件），如下图：
在这里插入图片描述

5、在当前01-module中输入webpack entry.js -o bundle.js后，即可得到如下图所示的结果，此时表示成功输出bundle.js文件：
在这里插入图片描述
6、访问index.html即可看到输出的"Hello world"，如下图：

二、使用npm命令编译输出

1、打开package.json文件，找到"scripts"，并在其中输入 “build”: “webpack entry.js -o bundle.js”，其中，"build"只是起的一个别名，可任意，“build"中的内容写的是我们上一步中输入的编译命令，如下图：
在这里插入图片描述
2、配置完package.json后，回到cmd中，输入npm run build，即可看到如下图所示的编译结果，访问index.html，可同样看到页面上输出"Hello world”：

三、webpack.config.js文件配置

1、在当前目录中创建webpack.config.js文件，并在文件中写入以下内容：

//直接在当前目录中敲 webpack即可生成bundle.js
module.exports={
	//入口
	entry:{
		//可以有多个入口，也可以有一个，如果有一个就默认从这个入口开始解析
		"entry":"./entry.js"
	},
	output:{
		filename:'./bundle.js'
	},
}

2、如果项目中创建了webpack.config.js文件，那么当我们直接在cmd中执行webpack命令时，会自动读取该文件中的配置进行项目的编译，如下图：
在这里插入图片描述
3、使用webpack编译后，即可在目录中看到生成的bundle.js文件，访问index.html即可看到页面输出的“Hello world”。

四、配置webpack.dev.config.js和webpack.produce.config.js文件

1、创建webpack.dev.config.js和webpack.produce.config.js文件，前一个我们表示生产(开发)环境的配置文件，后一个表示正式环境的配置文件，两个js文件的内容分别为：

//这个可以做测试环境的config文件。执行的命令为：webpack --config webpack.dev.config.js
module.exports={
	//入口
	entry:{
		//可以有多个入口，也可以有一个，如果有一个就默认从这个入口开始解析
		"entry":"./entry.js"
	},
	output:{
		filename:'./bundle.js'
	},
	watch:true,//监视文件改动，自动产出bundle.js
}

//这个可以做正式环境的config文件。
//执行的命令为：webpack --config webpack.produce.config.js
module.exports={
	//入口
	entry:{
		//可以有多个入口，也可以有一个，如果有一个就默认从这个入口开始解析
		"entry":"./entry.js"
	},
	output:{
		filename:'./bundle.js'
	}
}

2、两个js文件的区别在于生产环境的js文件我们写多了一句watch:true,写了这段代码，vue中的watch组件将会去监视文件的改动，并自动产出bundle.js文件。

3、在package.json文件中将运行上述两个js的命令放在script中，如下所示：

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack entry.js -o bundle.js",
	"dev":"webpack --config webpack.dev.config.js",//生产环境
	"produce":"webpack --config webpack.produce.config.js"//开发环境
  },
  "keywords": [
    "webpack"
  ],
  "author": "xgy",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}