Webpack前端工程化工具

一.现在市面上有哪些前端工程化工具?
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 【 主流行 】 自动解决模块依赖性问题

三.webpack的发展历史
官网: https://webpack.js.org/
​ 中文: https://www.webpackjs.com/

四.什么是webpack?
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

五.webpack的优点
1.支持CMD和AMD,同时拥有丰富的plugin和loader,webpack逐渐得到广泛应用。
2.支持ES Module,分析ESModule之间的依赖关系,webpack1必须将ES,Module转换成CommonJS模块,2支持tree sharking
3.新的特性大都围绕ES Module提出,如Scope Hoisting和Magic Comment;webpack3以上基本上都可以解决es6提出的模块化
4.可以解决es6模块化,更多个功能性 ,pulgin 和 loader, 前端框架中广泛使用: Angular Vue React 的脚手架都是由webpack来进行开发、管理

六.Webpack涉及到的前端环境问题 ’
1. Webpack底层是由 Node.js 来开发的,也就是说Webpack的配置文件都是 Node.js 文件
2. Webpack的模块化书写的规范是Common.js规范
3. 环境支持: Node.js 8+
4. 前端环境:

  • 开发环境 - 无法直接在服务器中去运行
  • 生产环境 - 将开发环境下的代码经过 打包 压缩 编译 之后的文件
  • 测试环境 - 将开发环境的代码经过 打包 压缩 编译 之后的文件,放在测试环境服务器中运行
    • unit test 单元测试
    • e2e 端到端测试
  • 预上线环境: 将开发环境的代码经过 打包 压缩 编译 之后的文件,放到一个局域网中去运行
  • 上线环境:将开发环境的代码经过 打包 压缩 编译 之后的文件,放到云服务器或是服务器主机
    中,可以供任何人访问,使用的一个环境( 这个环境的上线要经过国家审核 )

5.核心关注点在:

  • 开发环境
  • 生产环境

七.Webpack的安装
> 安装可以使用任何一个包管理器: npm yarn cnpm
>
> yarn > cnpm > npm
>
> 举例: 我使用npm安装了一个叫做 node-sass 的包 ,但是出错了 ,这时,我们想卸载,发现卸 载报错
>
> 解决: 覆盖安装
>
> cnpm || yarn 进行覆盖安装
>
> cnpm 和 yarn 优先级没有那么绝对

(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 使用

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

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

默认出口目录为: dist

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

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

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

1.终端命令行使用

  • 终端运行 webpack
    • 默认生成环境打包
  • webpack --mode development/production 开发环境/生产环境打包

2.配置文件使用=

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

3.配置webpack.config.js文件

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

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

八.配置方法
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是否能自动解决模块化依赖问题 可以
1.3 loader 转换器 可以将其他类型文件转换为我们想要的类型文件

​ 举例: 实现css的使用

  /* ------------------------------- 转换器 ------------------------------ */
  // 在webpack.config.js中做如下配置:
  module: { //这里用来存放转换器的配置
    rules: [
      // {} //每一个对象就是一个转换器的配置
      {//css的处理
        test: /\.css$/, // 整个项目下匹配 .css结尾的文件
        use: ['style-loader','css-loader'] //两个顺序是不写反的
      }
    ]
  },
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 优雅降级配置
  • 先安装转换器需要的包

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

  • 配置webpack.config.js

    	// 在webpack.config.js的module.rules中进行配置
    	{// 配置优雅降级
            test: /\.js$/,
            exclude: /node_modules/,
            use: [{
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }]
    
          }
    
1.6 html产出 - 依赖的是插件
  • 安装插件需要的第三方包

    $ cnpm i html-webpack-plugin -D

    	const HtmlWebpackPlugin = require('html-webpack-plugin')
    	
        //添加一个配置项
        plugins:[
                new HtmlWebpackPlugin({
                    template: './public/index.html',
                    filename: './index.html',//默认到output目录
                    hash:true,//防止缓存,会给文件后面加入hash
                    minify:{
                        removeAttributeQuotes:true//压缩 去掉引号
                    }
                })
        ]
    
1.7 css抽离 - 依赖的是插件

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

  • 安装插件

    $ cnpm i extract-text-webpack-plugin -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

npm I url-loader file-loader --save-dev

    //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 静态资源拷贝
  npm i copy-webpack-plugin -D

    const CopyWebpackPlugin = require('copy-webpack-plugin')
//plugin配置
    new CopyWebpackPlugin([
      { 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'  
制定报错信息的源

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

你可能感兴趣的:(前端)