webpack构建篇

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相关配置