内容简介:本文作为webpack小白入门文章,会详细地介绍webpack的用途、具体的安装步骤、注意事项、一些基本的配置项,并且会以一个具体的项目实例来介绍如何使用webpack。另外,本文会简单地介绍一些最新的webpack4在安装、使用中需要注意的要点。webpack是一个前端构建工具。那么什么是构建工具呢?前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开发环境的代码是为了更好的阅读,而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如,开发环境的代码,要通过混
本文作为webpack小白入门文章,会详细地介绍webpack的用途、具体的安装步骤、注意事项、一些基本的配置项,并且会以一个具体的项目实例来介绍如何使用webpack。另外,本文会简单地介绍一些最新的webpack4在安装、使用中需要注意的要点。
1.webpack是什么,用来做什么
webpack是一个前端构建工具。那么什么是构建 工具 呢?
前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开发环境的代码是为了更好的阅读,而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如,开发环境的代码,要通过混淆压缩后才能放在线上运行,这样代码体积更小,而且对代码执行也不会有任何影响。一般需要构建工具处理的几种情况:
- 代码压缩
将JS、CSS代码混淆压缩,让代码体积更小,加载更快
- 编译语法
编写CSS时使用Less、Sass,编写JS时使用ES6、TypeScript等,这些标准目前都无法被浏览器兼容,因此需要构建工具编译,例如使用Babel编译ES6语法。
- 处理模块化:
CSS和JS的模块化语法,目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法,但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。
其他的构建工具:最早普及使用的是Grunt,后面又出现Gulp。Webpack是目前流行的构建工具,可以说是构建工具的神器,学习成本较高。
2.安装webpack
-- 第一步,安装Node.js:
安装webpack前,你需要先安装Node.js,可以去 Node.js官网 下载,安装完成后,运行命令来查看是否安装成功:
node -v
需要注意的是webpack4官方不再支持node4以下的版本,依赖的node环境版本>=6.11.5,当然考虑到最佳的ES6特性实现,建议node版本可以升级到V8.9.4或以上版本,具体更新说明部分可以见: webpack4更新日志
下面就全局安装webpack,运行:
npm install -g webpack
--第二步,创建配置项:
安装完Node.js后,新建一个项目目录,进入目录后,执行:
npm init
按提示输入项目的名称、版本、描述、作者等信息,如果你不准备在npm中发布你的模块,这些答案都不重要,一路回车默认也可。之后就会在该目录下出现一个package.json文件,打开可以看到刚才输入的信息:
{ "name": "example", "version": "1.0.0", "description": "for introduction", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "lynnshen", "license": "ISC" }
--第三步,安装webpack:
需要把它安装到devDependencies,运行:
npm install --save-dev webpack
可以看到package.json中,devDependencies中有了webpack,版本号是4.17.1:
{ "name": "example", "version": "1.0.0", "description": "for introduction", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "lynnshen", "license": "ISC", "devDependencies": { "webpack": "^4.17.1" } }
npm安装注意两点:
(1)安装时如未指定版本号,则按最新的版本安装,这里webpack安装的是最新的4.17.1的版本
(2)npm install --save和npm install --save-dev的区别:
--save 会把依赖包名称添加到 package.json 文件 dependencies 键下,--save-dev 则添加到 package.json 文件 devDependencies 键下。dependencies是发布后还依赖的,devDependencies是开发时的依赖。
--第四步,安装webpack-cli:
注意:如果安装的是webpack v4+版本,则还需要安装webpack-cli或者webpack-command,否则webpack命令运行不了。执行:
npm uninstall webpack-cli //卸载本地安装的webpack-cli npm install -g webpack-cli//全局安装webpack-cli npm install --save-dev webpack-cli //把webpack-cli安装到devDependencies
这里我安装的是webpack-cli
先全局安装,再--save-dev安装后,可以看到package.json中增加webpack-cli:
{ "name": "example", "version": "1.0.0", "description": "for introduction", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "lynnshen", "license": "ISC", "devDependencies": { "webpack": "^4.17.1", "webpack-cli": "^3.1.0" } }
3.项目实例
在该目录下创建src文件夹,其中一个是入口文件app.js,一个是真正写页面的work.js。入口文件用来引入真正写页面的JS文件、CSS文件。
work.js内容:
document.write('欢迎阅读webpack入门教程')
app.js内容:
var dt = require('./work.js')
然后,再返回上一层目录,新建index.html文件(该文件和src属于同一层级),内容是:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div>test</div> <script src='./dist/main.js'></script> </body> </html>
总结一下,目前项目的文件目录是:
在命令行中执行:
webpack 项目入口文件的地址
这里是执行:
webpack src/app.js
如果发现报错:
Cannot find module ‘webpack’
这是因为没有安装webpack-cli或者webpack-command,请回到安装的第四步进行安装。
如果看到这个,恭喜你打包成功:
打包成功后,就会在项目目录下多出一个dist文件夹,里面有个main.js,index.html中<script>,引入的就是这个打包后的webpack文件地址。然后用浏览器打开index.html,可以看到:
这就是webpack的一个简单用法。
但是如果这样使用,每次编译都要输入webpack的入口文件路径,非常麻烦。可以通过编写webpack,来进行简化:
编写 webpack 配置文件
--新建webpack.config.js,内容是:
const path = require('path'); const webpack = require('webpack'); module.exports = { entry:{ app:__dirname+'/src/app.js',//唯一入口文件,__dirname是nodejs里的一个全局变量,它指向的是我们项目的根目录 }, output:{ path: path.resolve(__dirname, './dist'),//打包后的文件存放的地方 filename:'bundle.js' //打包后输出文件的文件名 } };
注意,这里把打包后输出的文件名命名为bundle.js,所以在index.html中需要修改引入的js文件名,index.html的内容是:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div>test</div> <script src='./dist/bundle.js'></script> </body> </html>
把原来打包后的dist/main.js删掉,命令行执行:
webpack
可以看到打包成功,在项目的dist文件中出现bundle.js:
浏览器打开index.html,发现正常显示:
注意,命令行直接执行webpack,前提是 全局安装 了webpack,如果不是全局安装,还需要在后面加上入口文件的路径。
如果不是全局安装webpack,也不想在后面加上入口文件的路径,因为这种写法比较麻烦,那怎么办呢?
可以在package.json中设置start关键字。start是Node.js的变量,相当于js的var,是一个关键字:
{ "name": "example", "version": "1.0.0", "description": "for introduction", "main": "index.js", "scripts": { "start": "webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "lynnshen", "license": "ISC", "devDependencies": { "webpack": "^4.17.1", "webpack-cli": "^3.1.0" } }
然后测试下:删除dist下打包后的文件bundle.js,命令行执行:
npm start
可以看到打包成功,在项目的dist文件中出现bundle.js:
浏览器打开index.html,发现正常显示。
如果不用“start”,而是其他的名字,如“dev”:
{ "name": "example", "version": "1.0.0", "description": "for introduction", "main": "index.js", "scripts": { "dev": "webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "lynnshen", "license": "ISC", "devDependencies": { "webpack": "^4.17.1", "webpack-cli": "^3.1.0" } }
则在命令行要执行:
npm run dev
注意写法,执行npm dev是不可以的。
在Webpack4.0中,通过mode指定环境。用于配置运行环境,mode的值可以为development,表示的是开发模式,或者是production,表示的是生产模式。webpack 会将 production 作为 mode 的默认值去设置。这里在package.json中修改:
{ "name": "example", "version": "1.0.0", "description": "for introduction", "main": "index.js", "scripts": { "dev": "webpack --mode development", "build":"webpack --mode production", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "lynnshen", "license": "ISC", "devDependencies": { "webpack": "^4.17.1", "webpack-cli": "^3.1.0" } }
命令行执行:
npm run dev
打包出来的bundle.js格式则是这样的,大小是4.25KB:
命令行执行:
npm run build
打包出来的bundle.js格式是这样的,大小是1001B:
可以看出生产模式相对运行模式,会更多地压缩代码体积大小。
至此,本文从安装到使用,详细地介绍了webpack的使用方法,如有问题,欢迎指正。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。