webpack的基本介绍 | Serena = 阳光果苏 = 自律给我自由

# 前端构建化工具 - webpack

https://www.webpackjs.com/ 。前端越来越有工程化、模块化趋势。对前端的要求越来越多。

webpack 产生的必要性

开发环境的需求是代码越详细越好、注释越具体越好，模块化开发、按照需求可以开发复杂的代码
到了生产环境（线上，准备要发布），需求又是相反的。
所以将开发环境的那些代码通过一款自动化工具来完成打包、编译、压缩等工作就称之为构建

# 使用 webpack

安装 webpack

//在任意文件夹下打开命令行中输入以下两个指令
cnpm i webpack -g
//回车后再次输入以下指令安装：
cnpm i webpack-cli -g
//测试是否安装成功
webpack -v 
//可以一次性安装多个
cnpm i webpack webpack-cli -g

写一个配置文件

告诉他怎么做，要打包哪些文件，打包到哪里等信息，该配置文件一般命名为：webpack.config.js
webpack 会自动根据该配置文件打包

// 导入了一个Nodejs的路径模块
const path = require('path');
// 导出
module.exports = {
 //entry :入口文件。即要打包的文件，自动分析里面的依赖，并且自动构
  entry:'./main.js',
  //出口：将打包好的放哪里
  output: {
    //存放路径，使用path模块下的resolve方法解决打包路径问题，__dirname 特殊的变量当前目录，‘dist’是目标目录
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

# 打包的具体步骤和内容

# 打包 JS

如果要打包 JS，需要将之前的 js 改为 Nodejs 的模块才可以正常打包。

原因：webpack 是基于 Nodejs 环境的，所以 JS 的模块化就不能像刚刚那样写了，要改成 Nodejs 模块的写法

如何改造：参考如何将 IIFE 改造为

两个步骤：

a. 注释 IIFE（第一行、最后一行）

b. 将 return 改为

//Nodejs的写法
module.exports={
    //要导的变量或方法
}
//也可以将其改为ES6的写法
export default {
    //导出去的变量或方法
}

在其他文件使用以上模块，比如导入到 main.js (主 JS 文件) 中使用

//NODEJS的导入模块的写法,
//如果后缀名是.js则后缀名可以省略
let moduleA=require('./a.js');
//ES6导入模块的写法
import moduleB from './b.js';
// 因为在mainjs中导入了a.js，所以可以在main.js中使用它的方法和属性
console.log(moduleA.a);
// 调用来自b.js的方法
moduleB.fun();

打包后可以在 index.html 中使用打包好的 JS 文件
1
<script src="dist/my-first-webpack.bundle.js"></script>

# 打包 CSS

webpack 默认只能打包 JS，如果要打包其他的，需要下载额外的插件：loader 插件。

需要添加 style-loader 和 css-loader

步骤：

导入 css-loader,style-loader（webpack 并没有集成则两款 loader，需要额外下载才可以使用）
1
2
3
在当前目录下执行以下指令：
cnpm i style-loader css-loader
回车

改写配置文件

// 导入了一个Nodejs的路径模块
const path = require('path');
// 导出模块
module.exports = {
 //entry :入口文件。即要打包的文件，自动分析里面的依赖，并且自动构建
  // entry: './a.js',
  entry:'./src/main.js',
  //出口：将打包好的放哪里
  output: {
    //存放路径，使用path模块下的resolve方法解决打包路径问题，__dirname 特殊的变量当前目录，‘dist’是目标目录
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  // 在默认配置的基础上添加了如下配置代码
  module: {
      // 添加打包css的配置
      rules:[{
        test: /\.css$/,
        use: ['style-loader','css-loader']
    }
  ]}
};

导入 css 文件

1
2
3

在main.js这个主页文件中导入了css
// 将CSS也当做模块来导入和处理
require('./css/style.css');

优化：将所有的该项目的依赖包文件写入到 package.json 中，下次即使删除了 node_modules 文件夹，也可以通过一个指令快速将所有的依赖包下载下来。

即将该项目的依赖包注入到该配置文件中

//如果这是你的项目，在第一次下载安装项目依赖包时，顺便写入到package.json中，方便下次一键下载
cnpm i 包名 -D;//--save-dev
//比如：
cnpm i style-loader -D
//或
cnpm i style-loader --save-dev

如果用的是别人的项目，先看看别人的 package.json 中有没有依赖包

1
2
3

"devDependencies": {
    "style-loader": "^2.0.0"
  }

如果有，则执行下面的指令一键安装：

1	cnpm i//下载所有的依赖包，就不需要一个个下载了

如果是自己的项目，假设你第一次时已经将依赖包注入到了 package.json 也可以使用 cnpm i 一键下载所有的依赖包。

# 小提示

如何升级 nodes 的模块，比如升级 webpack

升级跟安装是一样的指令
项目源代码做了任何改动都需要重新执行一次 webpack 打包指令。

# webpack 打包图片、图标字体

文件：图片、图标字体

需要使用一个 file-loader 的加载器

module: {
      rules:[{
      // 添加打包css的配置
        test: /\.css$/,
        use: ['style-loader','css-loader']
    },{
      // 打包了图片、图标字体---新增的
        test: /\.(png|jpg|gif|eot|woff|ttf|svg)$/,
        use: 'file-loader'
    }
  ]}

在项目根目录下使用命令行工具执行以下指令：

1
2
3

cnpm i //安装所有的依赖包
//刚刚添加了一个file-loader，需要单独下载并注入到package.json中
cnpm i file-loader -D

# 打包 HTML、并实现热更新（终极版）

需要把 HTML 也当做模块来处理并添加服务器包。

loader 没办法处理 HTML 这种文件，需要使用插件：

在 webpack.config.js 中新增如下配置

 //通过 npm 安装
const HtmlWebpackPlugin = require('html-webpack-plugin');
//访问内置的插件
const webpack = require('webpack'); 
//改动了任意代码都需要webpack实时更新打包构建，所以需要再次在局部安装一次

以上仅仅只是可以处理 HTML，如果要实现热启动（热更新）需要再配置一个服务器对象（包）webpack-dev-server
https://www.webpackjs.com/guides/development/# 使用 - webpack-dev-server
1
2
cnpm i --save-dev webpack-dev-server//局部安装一次
cnpm i webpack-dev-server -g//全局安装一次
还需要局部安装一次 webpack-cli 脚手架包
1
cnpm i webpack-cli -D
安装以上 5 个包后，就可以启动该应用了，原来使用 webpack 来启动，现在需要使用服务器的方式来启动，也就是启动指令改为了：
1
webpack-dev-server --open //在浏览器新窗口自动打开该应用
我们使用的是 webpack5 版本，但是 webpack-dev-server 还没有做好更新，即两者不兼容，需要将 webpack-cli 的版本降低，以便兼容才可以

做法：在 package.json 中将
1
2
3
"webpack-cli": "^4.2.0",
改为：
"webpack-cli": "^3.3.12",
然后删除项目的 node_modules 文件夹，重新使用 cnpm i 安装一次

将启动指令改为容易记忆的

找到package.json的script部分，添加如下代码：
"start": "webpack-dev-server --open",
//下次启动应用时可以用
npm start 
来代替webpack-dev-server --open

# less-css 的预处理器之一

# 为什么要学习 css 的预编译处理器

CSS 最明显的短板就是它只是一个标记语言，没有变量、语句等编程语言的特点。如果项目过长，写起来有些麻烦，而且会产生较多的重复代码。

虽然只要团队中的成员都有模块化的思想，并有统一的规范，可以完全不在团队中使用与处理器，但是为了能让写 css 变得像写 JS 那样灵活，支持变量、语句、混合（mixin）、函数等等，就产生了预处理器。

比如 bootstrap 的 css 就是有 css 预编译写好再转成普通 css 文件的。后面我们学习 vue.js 或者看别人写的项目，到公司上班都很有可能遇到 css 预编译处理器。所以我们得学会如何使用。

# 常见的预编译处理器

1、sass(Syntactically Awesome StyleSheets)
官网：http://sass-lang.com/
中文：http://sass.bootcss.com/
学习教程：
http://www.ruanyifeng.com/blog/2012/06/sass.html
线上测试工具：https://www.sassmeister.com/

2、less
less 受 sass 影响较大，也就是写法借鉴了 sass，两者语法类似
官网：http://lesscss.org/
中文：http://lesscss.cn/
学习教程：
http://www.bootcss.com/p/lesscss/
http://www.runoob.com/manual/lessguide/
https://zh.wikipedia.org/wiki/Less_(层叠样式表)

3、stylus
因为 node.js 的兴起才诞生的，但流行程度远不及以上两者。

两者语言语法差不多，基本上一通全通。相比较而言，less稍微简单一点点，更适合前端开发，而sass更适合偏后端使用。

# less 语法

变量

JS:
var a=1;
less:
@red:red;//值是红色
@br:1px solid blue;
@m10:10px;
使用：
div{
    color:@red;
    border:@br;
    margin:@m10;
    padding-top:@m10;
}
//以上代码最终会编译成如下正常格式：
div{
    color:red;
    border:1px solid blue;
    margin:10px;
    padding-top:10px;
}

混合
嵌套

# 如何使用（语法通用）

在浏览器环境下使用

两种使用条件：

a. 需要在服务器环境下进行（要借助 JS 完成）

//在要使用less的HTML文件中写如下代码：
<!-- 导入less文件 -->
<link rel="stylesheet/less" type="text/css" href="style.less">
<!-- 导入解析less的JS文件
下载地址：https://raw.githubusercontent.com/less/less.js/v2.5.3/dist/less.min.js
-->
<script src="less.min.js"></script>
//2. 在服务器环境下打开该项目或文件

b. 先编译再使用（非常原始的用法，很不方便）

在任意文件夹下，通过npm下载less包
cnpm i less -g
//看看是否安装成功
lessc -v //3.12.2
//编译  输入less文件，输出css文件
lessc less文件  css文件

在 Nodejs 或 webpack 环境下使用

1、将less放到src中当做模块来打包，在main.js中导入
// 导入less文件
require('./less/style.less');
2、在webpack.config.js中导入less-loader来处理
{
    // 添加打包css|less的配置
	test: /\.(css|less)$/,
	use: ['style-loader','css-loader','less-loader']
}

3、在当前项目目录下下载less-loader和less包
cnpm i less-loader less -D

4、npm start 启动该项目（先确保安装了该项目的所有的依赖包）

5、OK，完成！在项目中直接写less代码会自动编译和刷新页面

webpack