1.什么是webpack?
webpack是一个javascript应用程序的静态模块打包器。
2.webpack有什么作用?
webpack会将项目的资源文件当成一个一个的模块,模块之间会有依赖关系,webpack将会对这些有依赖关系的文件进行处理,让浏览器能够识别出来,最后将应用程序需要的每个模块打包成一个或者多个bundle。
3.打包的实例:
1)安装node
链接: https://nodejs.org/zh-cn/
2)在桌面新建一个项目webpackdemo
3)打开sublime,打开这个项目
4)创建package.json文件(步骤:首先打开终端,进入到项目所在的文件夹路径里,进入项目,输入npm init
,然后根据提示一步步进行选择)如下图所示:
输入npm init
这样项目下就会出现一个package.json文件,文件里的内容为:
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "\"webpack4\"",
"main": "webpack.config.js",
"dependencies": {
"webpack-cli": "^3.3.11",
"webpack": "^4.43.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "\"xutian\"",
"license": "ISC"
}
5)安装webpack
可以使用本地安装,也可以使用全局安装,但是建议使用本地安装,因为不同的项目可能会用到不同版本的webpack,使用全局安装的话会造成一些麻烦)
本地安装:在终端输入npm install webpack webpack-cli --save-dev
全局安装:在终端输入npm install -global webpack webpack-cli
6)打包:在项目中创建一个src文件夹,在src文件夹下创建一个index.js文件,在package.json文件里的“scripts”:{}里写"dev": "webpack --mode development", "build":"webpack --mode production"
完整代码如下:
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "\"webpack4\"",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build":"webpack --mode production"
},
"author": "\"xutian\"",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
在终端写命令:
npm run dev
(开发阶段)
npm run build
(生产阶段)
运行完这个命令以后,项目中就会生成一个dist文件夹,里面有main.js文件。
注:开发阶段还是生产阶段看你自己的需要来决定。