webpack简单使用（一）

最新推荐文章于 2021-01-02 16:46:09 发布

也就会一点点

最新推荐文章于 2021-01-02 16:46:09 发布

阅读量123

点赞数

分类专栏： +前端学习

本文链接：https://blog.csdn.net/qq_37986863/article/details/103006214

版权

+前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

webpack是一个JS应用的静态模块打包工具。

引用官网图。

Webpackå·¥ä½æ¹å¼

前端模块化提供的方案有：AMD、CMD、CommonJs、ES6，目前大部分浏览器可以识别ES6。所以我们打包的意思是将js、html、css等打包成浏览器认识的语法。

一、下面进入正题：

使用webpack打包工具的前提是依赖Node环境，而node又依赖npm工具来管理各种包。

1-so 我们需要先安装node.js

http://nodejs.cn/download/

2-在cmd使用node-v 查看安装版本

3-先全局安装webpack(这里先指定版本）

npm install webpack@3.6.0 -g

4-先利用webpack打包最简单的项目，我创建的目录结构如下：（一开始是没有bundle.js文件,是打包后生成的）

5-main.js代码：这里require是将工具方法做一个导入使用

const {add,mul}=require('./mathUtil.js')//使用commonjs模块化规范

//02使用
console.log(add(20,30));
console.log(mul(20,30));

//03下一步webpack打包成最终的js文件，给浏览器运行。

6-mainUtil.js 这个作为工具方法，必须将它导出，暴露出来，别的地方才能导入使用。

function add(num1,num2){
	return num1+num2;
}
function mul(num1,num2){
	return num1*num2;
}

module.exports={
	add,mul
}

7-执行一下命令 webpack ./src/main.js ./dist/bundle.js

./src/main.js：是你需要打包的文件，webpack会将它所有依赖的文件进行打包，所以一般我们只需要打包入口的js.

./dist/bundle.js :是你打包得到的新js,存放在dist文件夹下。

8-引用，在一个html文件里引入script就可以运行查看效果了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script src="dist/bundle.js"></script>
	</body>
</html>

还没结束，你会不会觉得在命令行里输入webpack ./src/main.js ./dist/bundle.js很繁琐，而且还容易出错？下面我们就来配置一下webpack，减少我们出错的概率。

二、webpack配置

这时候，我们创建一个webpack.config.js配置文件（名称没做其他配置，是不能改的噢）

这里主要配置入口和出口

const path=require('path')//依赖于node的包，需要npm安装   npm init命令建包

//配置文件，可以直接通过webpack打包
module.exports={
	entry:'./src/main.js',//入口
	output:{//出口
		path:path.resolve(__dirname,'dist'),//拼接路径
		filename:'bundle2.js'
	}
}

然后，我们去刚生成的package.json包里添加配置：（不是必须的）

   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"//cmd执行npm run build，会自动找到这个webpack映射，会优先执行本地的webpack
  },

然后，我们之前利用webpack命令进行打包可以改成，npm run build啦。

三、提出疑惑，要是我们想对css文件、图片也当成模块进行打包引用呢？是不是也和打包js文件一样简单呢？

也就会一点点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack简单使用（一）

webpack是一个JS应用的静态模块打包工具。引用官网图。前端模块化提供的方案有：AMD、CMD、CommonJs、ES6，目前大部分浏览器可以识别ES6。所以我们打包的意思是将js、html、css等打包成浏览器认识的语法。一、下面进入正题：使用webpack打包工具的前提是依赖Node环境，而node又依赖npm工具来管理各种包。1-so 我们需要先安装node.js...
复制链接

扫一扫