前端打包工具webpack4----1----第一章第二章

最新推荐文章于 2022-09-15 18:23:13 发布

nzch

最新推荐文章于 2022-09-15 18:23:13 发布

阅读量142

点赞数

分类专栏： webpack4 XXD

本文链接：https://blog.csdn.net/qq_28764557/article/details/102555140

版权

XXD 同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

webpack4

5 篇文章 0 订阅

订阅专栏

介绍。

--------1-1----------

webpack是什么

webpack其实就是一个JavaScript应用程序的静态模块打包器。

webpack有什么作用

模块化打包:

webpack会将项目的资源文件当成一个一个模块（js,css,html），模块之间会有依赖关系， webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打包成一个或者多个bundle。

-------1-2-----------

首先要有node的环境。

1.mac下安装node环境：https://www.jianshu.com/p/da1e536fe475

测试了node和npm

node -v
npm -v

---

2.进入到项目中：

创建package.json文件

主要的作用是登记各种组件的

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
  },

命令:npm init

设置属性：、

3.下载速度慢可以将npm指向淘宝的镜像文件。cnpm：http://npm.taobao.org/

4. 安装webpack

本地安装:(推荐)
npm install --save-dev webpack npm install --save-dev webpack-cli
全局安装:
npm install --global webpack webpack-cli

cnpm install webpack webpack-cli --save-dev：不能用要用npm

安装：npm install webpack webpack-cli --save-dev

npm install webpack webpack-cli --save-dev

5.打包

默认entry入口 src/index.js

默认output出口 dist/main.js

创建src文件夹。创建index.js

打包模式:

webpack --mode development

webpack --mode production

package.json:

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "\"webpack4\"",
  "main": "index.js",
  "scripts": {
    "dev":"webpack --mode development",
    "build":"webpack --mode production"
  },
  "author": "“eric“",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.1",
    "webpack-cli": "^3.3.9"
  }
}

在命令行打开：npm run dev就会运行：webpack --mode development

6.打包完成会生成一个dist文件夹。

接下来看下另一个模式就是生产模式：

npm run build

main.js都打包为一行。

主要是打包js文件。

---------------------------------1-3--------------------------------

1.创建webpack.config.js 指定了入口的路径和出口的路径的。

const path = require('path');


module.exports = {
	entry:'./public/index.js',  //入口的路径
	output:{
		path:path.resolve(__dirname,'build'),  //存放文件夹名称,绝对路径
		filename:"bundle.js"  //存放文件的名称
	}
}

2. 配置入口entry(所需打包的文件路径)

这个要在对应的入口下新建入口文件：'./public/index.js'

3. 配置出口output

4.npm run dev

5.创建了文件

总结：

(1)path指文件打包后的存放路径

(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径

(3)__dirname 表示当前文件所在的目录的绝对路径

(4)filename是打包后文件的名称

打包入口就是我自己的js文件。出口就是打包后的文件位置。

--------2-1-------

看笔记。

1.单入口多文件

创建一个文件：

配置config文件：

const path = require('path');


module.exports = {
	entry:['./public/index.js','./public/index2.js'],//入口有多个js文件的
	output:{
		path:path.resolve(__dirname,'build'),
		filename:"bundle.js"
	}
}

查看结果：

2.多入口多出口

设置config文件

注意多入口一定是多出口的。

const path = require('path');


module.exports = {
	// 多文件单出口
	// entry:['./public/index.js','./public/index2.js'],
	// output:{
	// 	path:path.resolve(__dirname,'build'),
	// 	filename:"bundle.js"
	// }

	//多入口多出口
	entry:{
		pageOne: './public/pageOne/index.js',
		pageTwo: './public/pageTwo/index.js',  //三个文件夹注意
		pageThree: './public/pageThree/index.js'
	},
	output:{
		path:path.resolve(__dirname,'build'),
		filename:"[name].js"//是变量
	}
}

看下效果：

---------------

上面工程的demo是webpackdemo

--------2-2-------

1. 了解webpack-dev-server webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能:

(1)为静态文件提供服务

(2)自动刷新和热替换(HMR)

2. 安装webpack-dev-server 本地安装

npm install --save-dev webpack-dev-server

3. 配置webpack.config.js文件

const path = require('path');//引入组件


module.exports = {
	entry:'./public/index.js',
	output:{
		path:path.resolve(__dirname,'build'),
		filename:"bundle.js"
	},
	devServer:{//在这里设置
		contentBase:'./build',  //设置服务器访问的基本目录
		host:'localhost', //服务器的ip地址
		port:8080,  //端口
		open:true  //自动打开页面
	}
}

4.在page.json写脚本命令设置启动项

"scripts": {
"start": "webpack-dev-server --mode development" }

5.先npm run dev打包

6.在命令行程序运行npm run start

可以自动刷新。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	
	<script src="bundle.js"></script>
</body>
</html>

应该是默认访问index.html吧。

--------2-3-------

nzch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端打包工具webpack4----1----第一章第二章

介绍。--------1-1----------webpack是什么webpack其实就是一个JavaScript应用程序的静态模块打包器。webpack有什么作用模块化打包:webpack会将项目的资源文件当成一个一个模块（js,css,html），模块之间会有依赖关系， webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打...
复制链接

扫一扫