WEBPack 构建 -- 基于webpack4
1.环境准备
NodeJs:
是一个基于 Chrome V8 引擎的 JavaScript 运行环境。其使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。简单来说就是一个运行环境,其内嵌了npm,可用作js包管理。
下载地址:http://nodejs.cn/downlad/;
一般选用稳定版,具体看自己需求。
在命令行终端输入 node -v 和 npm -v 可查看安装版本
WebStorm:
是一款优秀的前端开发IDE,可用其他ide代替,如idea,vscode等。
下载地址:https://www.jetbrains.com/webstorm/;
非社区版激活方式详见:http://idea.lanyus.com/; 具体不再重复叙述。或直接使用现有IDE即可。
2.基础构建
1.项目创建
在webstorm 中 File-> Project -> Empty Project;
此时构建了一个空项目,点击左下角Terminal,打开项目对应命令终端。
在命令终端输入 npm init -y 创建一个基于npm的项目,此时文件夹会多一个 package.json文件。此文件为js包版本控制。
2.WebPack引入
然后继续安装 webpack 环境。 webpack是一款优秀的前端打包工具,具体详见: https://www.webpackjs.com;
在终端继续输入
npm install --save-dev webpack
如果是安装 webpack4+ 版本,还需安装下面这个,否则打包时会报错
npm install --save-dev webpack-cli
如果安装过程很慢,一般是npm默认使用了国外服务器,可以通过挂载VPN解决,或者使用国内淘宝镜像.
可在命令行终端输入
npm config get registery查看服务器地址
npm config set registry https://registry.npm.taobao.org 切换为淘宝镜像
或者可以安装个插件,终端输入
npm i nrm -g nrm
使用 nrm ls 查看可选服务器,当前使用的前面会有 “*”
前面对应简称,后面是服务器镜像路径,使用 nrm use taobao 使用淘宝镜像服务器。
安装好weback后
会生成一个package-lock.json文件,这个文件是npm具体依赖对应的具体版本,不用去理会。
被下载下来的js会被放在node_modules中,在npm项目中,此路径为默认引入路径,所以直接引入对应js即可
同时package.json如下所示。
{ "name": "webpackStudy", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.35.2", "webpack-cli": "^3.3.5" } }
简单介绍下package.json文件内容
"scripts" 是脚本命令,大概相当于启动器,
“devDependencies” 开发模式依赖,即不参与最后生产环境中去,同样还有一般的依赖。
在使用命令终端导入js包格式默认为
npm install 包名@版本号 --参数
绿色部分为可选
@版本号 为写的版本对应的最新版本,如 npm install jquery@1 会下载的为jquery 1中最新。
可选参数
-g 全局安装,即不安装到当前项目,一般安装为npm的一些插件。
-save 安装完后并将该版本写入到package.json的依赖中
-save-dev 引入到开发模式依赖,不会被下载到node_modules中,一般为辅助开发的工具而非被部署到项目应用的js模块。
到目前为止,我们的环境基本已经构建好了,接下来该配置webpack了。
3.webpack的相关配置介绍
相关学习具体可参考 https://www.webpackjs.com/guides/getting-started/;这里仅仅做常用的配置,
在根目录下创建src 和 dist 文件夹,src作为源码文件夹, dict作为打包完输出的文件夹,项目文件夹如图所示:
在src中添加一个名为 index.js的js,此js为所有js的入口文件,这样在命令行终端输入 npx webpack 后webpack会将此js及其引入的文件进行打包编译。
如果需要更为强大的功能,请继续
去掉 package.json中 main属性,给"scripts"添加一个子属性 "build": "webpack",如图所示
同时在根目录下添加名为 webpack.config.js。
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
webpack.config.js是webpack的配置文件,可拆分成开发版本和生产版本等,这里不详细讲述,主要介绍下module.exports 暴露的属性及其作用。
entry: js文件入口,一般由此js导入项目全部文件,
output: 打包编译后的文件。
module: 一些第三方加载的loader(主要用于非js的文件加载,如css文件之类的)
plugins: webpack的插件,一般用于帮助开发的小功能插件。
在之后的日子里会具体介绍webpack相关配置