webpack 用nodejs 开发的前端构建工具@stage3---week4--day3

webpack

安装

1. 全局安装 webpack 和 webpack-cli

   % sudo cnpm i webpack webpack-cli -g

2. 本地安装 webpack 和 webpack-cli

   % sudo cnpm i webpack webpack-cli -D

在根目录下创建 src 目录 > index.js

% webpack //执行命令(生产环境)
但是会有 配置 Wainning

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

将在根目录下创建 dist 目录 里面并有打包后的文件()

% webpack --mode development //开发环境 (此时便不会有警告 ⚠️)
% webpack --mode production //生产环境 (此时便不会有警告 ⚠️)

为 webpack 添加配置文件

1. 命令运行时 配置文件的引用

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode development --config config/webpack-config-dev.js", // 定位
    "build": "webpack --mode production --config config/webpack-config-prod.js" // 定位
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "prop-types": "^15.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }
}

下面来进行 webpack 的配置

const path = require("path");

module.exports = {
  entry: "./src/index.js", //确定入口文件信息
  output: {
    // 确定出口文件信息
    filename: "main_[hash:8].js",
    path: path.join(__dirname, "../build")
  },
  mode: "development", //确定打包转换模式
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"] // % sudo cnpm i css-loader -D   &&
      }
    ]
  }
};

配置

Webpack

1. webpack可以将其他类型文件通过loader转换为另一个类型文件
2. webpack可以解决文件之间的相互依赖关系

1. 了解webpack在前端开发当中的一个重要性
2. 了解webpack版本信息
3. webpack基本配置
   • 如何使用webpack配置项目
4. 掌握程度： <= webpack 30%

一、前端工程化工具

也叫： 自动化工具

1. grunt
2. gulp ( 4.x )
3. Browserify ( Webpack 前身 )
4. Webpack 【 主流行 】
5. rollup.js https://www.rollupjs.com/guide/zh 【 小众 】
6. parcel 【 小众 】
7. FIS https://fis.baidu.com/ 【 小众 】

二、前端工程化工具的发展历程

1. grunt
2. gulp ( 4.x ) 流的操作 .pipe()
3. Browserify ( Webpack 前身 ) 没有兼容模块化问题（ es6 ）
4. Webpack 【 主流行 】 自动解决模块依赖性问题
   • AMD
   • CMD
   • es Module
   • 可以将其他类型文件做转换

三、 Webpack版本的发展过程

官网: https://webpack.js.org/

中文: https://www.webpackjs.com/

webpack1

	支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。

	loader  转化器 
		目的： 是将其他类型文件转成另一个类型文件
			.vue => webpack  vue-loader => js
			.jsx => webpack jsx-loader => js

webpack2

	支持ES Module，分析ESModule之间的依赖关系，

	webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking

webpack3

	新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；

            webpack3以上基本上都可以解决es6提出的模块化

webpack4

    	可以解决es6模块化【 export default / export          import 】

	更多个功能性 pulgin【 插件 】  和  loader 【 转换器 】	

	前端框架中广泛使用： Angular  Vue  React  的脚手架都是由webpack来进行开发、管理

学习目标：

-  通过webpack自主构建一个项目 【 手动构建一个项目 】

• webpack基本配置
• webpack高级配置

四、 Webpack涉及到的前端环境问题

1. Webpack底层是由 Node.js 来开发的，也就是说Webpack的配置文件都是 Node.js 文件
2. Webpack的模块化书写的规范是Common.js规范
3. 环境支持： Node.js 8+
4. 前端环境： 【 重点 】
   • 开发环境 - 无法直接在服务器中去运行
   • 生产环境 - 将开发环境下的代码经过 打包 压缩 编译 之后的文件
   • 测试环境 - 将开发环境的代码经过 打包 压缩 编译 之后的文件，放在测试环境服务器中运行
     • unit test 单元测试 【 mocha Jest 】
     • e2e 端到端测试
   • 预上线环境： 将开发环境的代码经过 打包 压缩 编译 之后的文件，放到一个局域网中去运行
   • 上线环境：将开发环境的代码经过 打包 压缩 编译 之后的文件，放到云服务器或是服务器主机中，可以供任何人访问，使用的一个环境（ 这个环境的上线要经过国家审核 ）
     • 云服务器： 类比： 宾馆 中有很多的单间，每一个云服务器就是其中一个单间
     • 主机： 整个酒店
5. 核心关注点在：
   • 开发环境
   • 生产环境

五、Webpack的安装

安装可以使用任何一个包管理器： npm yarn cnpm

yarn > cnpm > npm

举例： 我使用npm安装了一个叫做 node-sass 的包 ，但是出错了 ，这时，我们想卸载，发现卸载报错

解决： 覆盖安装

cnpm || yarn 进行覆盖安装

cnpm 和 yarn 优先级没有那么绝对

版本信息

webpack   4.39.3

webpack-cli  3.3.7

1.全局安装

$ npm install webpack webpack-cli -g

$ cnpm install webpack webpack-cli -g

$ yarn add webpack webpack-cli global

2.局部安装

$ npm install webpack webpack-cli -D

$ cnpm install webpack webpack-cli -D

$ yarn add webpack webpack-cli -D

局部优先级 > 全局

六、Webpack的概念

• webpack* 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（ 分块束 ）
  理解：
  举例： 我们又两个模块，A模块引用B模块，我们现在使用webpack打包A模块，webpack会自动寻找A和B之间的关系，进而打包B模块

七、Webpack 使用

默认源代码开发目录为： src

默认的入口文件名称为： src/index.js

默认出口目录为： dist

默认出口打包文件名称为： main.js

通过mode来设置是那个环境下打包使用

开发环境打包： 代码不经过压缩、注释不会被删除

eval 这个方法时用来解析字符串，这个字符串里面有js代码 【 性能不太好 】

1.终端命令行使用

• 终端运行 webpack

  • 当我们局部安装了webpack webpack-cli后，发现运行webpack报错命名找不到
    • 解决： 全局安装webpack webpack-cli
  • 默认生成环境打包

• webpack --mode development/production 开发环境/生产环境打包

2.配置文件使用

• 默认webpack配置性文件名称为 webpack.config.js，这个文件是在根目录下运行的
• 运行 webpack 命令就会自动的去寻找这个 文件
• webpack.config.js文件中我们配置的就是 webpack的参数

3.配置webpack.config.js文件

我们接下来对这个文件进行配置，主要从以下几个方面来着手

1. 基础功能 ：  入口   出口 文件配置
2. 转换器： loader 
3. 插件: plugin

单页面配置  vs  多页面配置 
	单页面配置指的只有一个入口一个出口的项目  【 推荐 】
	多页面配置指的是有多个入口多个出口的项目

1.单页面配置

1.1 基础功能

/* 
  webpack配置文件
  也是Node.js文件
  这个文件也是一个独立的 Common.js 模块
*/

const path = require('path')

// 1. 创建模块

const webpackConfig = {
  entry: './src/index.js', //网络路径（ 相对路径 ）
  output: { //出口目录、文件的配置
    path: path.join( __dirname,'dist'), // 磁盘路径
    filename: 'js/app.js' // 入口文件将来打包到出口目录中的文件的路径和名称
  },
  mode: 'development'//确定是生产环境还是开发环境的打包
}

// 2. 导出模块

module.exports = webpackConfig

​
​

1.2 问题： 验证webpack是否能自动解决模块化依赖问题 可以

• 打造MVC
  • index.js 用了 C
  • C 里面用 M
  • M里面用 V

1.3 loader 转换器 可以将其他类型文件转换为我们想要的类型文件

$ sudo cnpm i css-loader style-loader -D

举例： 实现css的使用

  /* ------------------------------- 转换器 ------------------------------ */
  // 在webpack.config.js中做如下配置：
  module: { //这里用来存放转换器的配置
    rules: [
      // {} //每一个对象就是一个转换器的配置
      {//css的处理
        test: /\.css$/, // 整个项目下匹配 .css结尾的文件
        use: ['style-loader','css-loader'] //两个顺序是不写反的
        // 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】
      }
    ]
  },

1.4 配置前端静态服务

	//需要自动刷新： webServer 搭建前端开发服务器
    $ cnpm install webpack-dev-server -g | -D
    参数:
        命令行
        webpack-dev-server --port 8088 --open --mode development

        写到webpack.config.js配置文件:

        devServer: {//和module同级
            port: 8088,
            open:true
        }

        终端运行方式2: webpack-dev-server
    
    把运行命令放到package.json文件:    devServer可以不要了
        "scripts":{
            "dev": "webpack-dev-server  --port 8088 --open"
        }

        终端: npm run dev

1.5 优雅降级配置

• 先安装转换器需要的包

  - $ sudo  cnpm install [email protected] @babel/core @babel/preset-env -D
  

• 配置webpack.config.js

     	// 在webpack.config.js的module.rules中进行配置
             {// 配置优雅降级
                 test: /\.js$/,
                 exclude: /node_modules/, // 排除node_models中的js文件
                 use: [{
                   loader: 'babel-loader',
                   options: {
                     presets: ['@babel/preset-env']
                   }
                 }]
   		 				}
  
  

1.6 html产出 - 依赖的是插件

• 安装插件需要的第三方包

  $ sudo  cnpm i html-webpack-plugin -D
  

      	const HtmlWebpackPlugin = require('html-webpack-plugin'). //在配置文件中引入
  

      //添加一个配置项
      plugins:[  
              new HtmlWebpackPlugin({  // html 产出
                  template: './public/index.html',
                  filename: './index.html',//默认到output目录
                  hash:true,//防止缓存,会给文件后面加入hash
                  minify:{
                      removeAttributeQuotes:true//压缩 去掉引号
                  }
              })
      ]
  

1.7 css抽离 - 依赖的是插件

将webpack编译过得css文件以 css外部引用的形式引入

• 安装插件

  $ sudo cnpm i extract-text-webpack-plugin@next -D
  

          const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
  

  ​

      //loader配置：
      use: ExtractTextWebapckPlugin.extract({
            use: 'css-loader'
          }) //不再需要style-loader
  
  
  
  
      //pulgin配置
      new ExtractTextWebapckPlugin('css/[name][hash:6].css')
  

1.8 图片打包

$ yarn add url-loader file-loader --dev

$ sudo cnpm i url-loader file-loader -D

    //url-loader 存base64  file-loader存文件（woff mp3）
    {
        test:/\.(png|jpg|gif)/,
        use:[{
          loader: 'url-loader',
          options: {
            limit: 5000,//字节少于5000 ——》 base64  超过5000  file
            outputPath: 'images/', //5000意思存到images
          }
        }]
     }

//css中引入 | js动态(模块化) 引入

1.9 静态资源拷贝

$ sudo cnpm i copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin');  //? 导入下载的 webpack 的copy 插件
    
    
//plugin配置
    new CopyWebpackPlugin([{   //todo 静态资源拷贝
        from: path.resolve(__dirname,'static'),   
        to:path.resolve(__dirname,'build/static') 
      }])

1.10 配置文件拆分

"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

1.11 错误资源定制

// 在webpack.config.js中添加如下配置项：
devtool: 'source-map'  // ? 错误资源定制
制定报错信息的源

1.12 后缀名省略

   // 配置webpack.config.js
    resolve: {     //与module同级
        extensions: [ '.js', '.css', '.json', '.jsx']
    }
    
    
    
    
    require ('./style')// 可以省略后缀名

2.多页面配置

2.1 基础功能

/* 
  webpack配置文件
  也是Node.js文件
  这个文件也是一个独立的 Common.js 模块
*/

const path = require('path')

// 1. 创建模块

const webpackConfig = {
  entry: { // 多页面配置，多个入口文件
    'index': './src/index.js',
    'main': './src/main.js'
  }, //网络路径（ 相对路径 ）
  output: { //出口目录、文件的配置
    path: path.join( __dirname,'dist'), // 磁盘路径
    filename: 'js/[name].js' // 入口文件将来打包到出口目录中的文件的路径和名称
  },
  mode: 'development'//确定是生产环境还是开发环境的打包
}

// 2. 导出模块

module.exports = webpackConfig

​
​
​

解释： 为什么我们的文件要跟上hash后缀？

• 目的： 就是为了创建多个版本，便于版本切换

项目上线

​ 新项目替换老项目

​ 顺利

​ bug: 切换为旧版本，然后进行新版本的维护

前端的反向代理最流行的 nginx

前端脚手架中用的都是 http-proxy-middleware

webpack自带它

作业：

webpack配置功能完成 2 次

配置sass

配置less

配置postcss 

​
​
复习 【 整理 】

​