webpack 的基本概念和配置

---

title: webpack 的基本概念和配置
tags: [webpack]
date: 2019-06-29 22:13:17
categories: webpack

webpack 的基本概念和配置

一、市面上有哪些类似于 Webpack 的前端工程化工具？

1. grunt (14-16年)
2. gulp ( 4.x ) 流的操作 .pipe()
3. Browserify ( Webpack 前身) 没有兼容模块化问题（ es6 ）
4. Webpack ( 主流行 ) 自动解决模块化的依赖问题

二、 webpack 的概念

webpack* 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（ 分块束 ）

三、Webpack 版本的发展过程

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

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

webpack1

​ 支持CMD和AMD，同时拥有丰富的plugin(插件)和loader(转换器)，webpack逐渐得到广泛应用。

webpack2

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

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

webpack3

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

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

webpack4

​ 可以解决es6模块化

​ 更多个功能性 pulgin 和 loader

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

对比总结：

webpack 2 比 webpack1 多的是对 es 模块的支持，

webpack3 比 webpack2 多的是es 模块功能性的的增加，如 Scope Hoistion（ 作用域 ）和 Magic Comment (注释语法）

webpack4 增加了 更多的 个性化插件和 和 loader( 转换器)，对 es 6 模块更加支持，在前端的框架中广泛使用（Vue/ Angular React 的脚手架都是由 webpack 来开发和管理的 ）

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

1. Webpack 底层是由 Node 来开发的，也就是说 webpack 的配置文件的是 Node 文件

2. Webpack 的模块化书写的规范是 Common.js 规范

3. 环境支持： Node 8+

4. 前端环境

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

5. 前端核心关注点在：
   ​ - 开发环境
   ​ - 生产环境

五、Webpack 的安装

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

优先级 ：yarn > cnpm > npm

举例： 使用 npm 安装 node-sass 的包出错了，卸载时出错

解决： 需要换个包管理器覆盖安装

cnpm || yarn 进行覆盖安装

1. 全局安装

npm install webpack webpack-cli -g

cnpm install webpack webpack-cli -g

yarn add webpack webpack-cli -g

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 -配置项

  • 默认以生产环境打包

• 设置开发环境打包 or 生产环境打包

  webpack --mode development(开发环境)/production(生产环境) 
  

2. 配置文件使用( 推荐)

由于命令行使用需要多个配置参数，很麻烦，这时候就需要用 webpack.config.js 这个文件配置文件来配置参数

• 默认 webpack 配置文件名为 webpack.config.js，这个文件需要在根元素下运行

• 运行 webpack 命令 就会自动去 寻找 webpack.config.js 文件

• webpack.config.js 文件中，我们就是配置的就是 webpack 的参数

3. 配置 webpack

这个配置文件是一个 Node.js 文件，也就是一个独立的 Common.js 模块，需要创建和导出

主要这要以下功能进行配置

1. 基础功能 : 入口 出口 文件配置

2. 转换器 :loader

3. 插件: plugin

1.单页面配置

1.1 基础功能配置

1.1.1 入口 出口

const path = require('path');

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

//导出模块
module.exports = webpackConfig;

1.2 loader (转换器) 配置

1.2.1 转换 css

//下载转换器
​ cnpm i css-loader -D
​ cnpm i style-loader -D
​ css-loader: 在 js 文件中 识别 css
​ style-loader: 将 js 编译过后的 css 文件，转成 css 内部样式 插入到页面

//可以将其他类型文件，转换为我们想要的类型文件

 // ---------------转换器 ----------------
  module: {  //存放转换器的配置
    rules: [            //rulse数组来存放转换器
      {                 //每一个对象就是一个转换器啊
        test: /\.css$/,   //整个项目匹配 .css 结尾的文件
        use: ['style-loader','css-loader']   //越靠前，缺后执行
      }
    ]
  }

1.2.2 babel 优雅降级

ES6+ --> ES5

先安装转换器需要的包

$ cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

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

      }

1.3.3 图片打包

安装插件

$ cnpm i url-loader file-loader -D

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

1.3 plugin (插件) 配置

1.3.1 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.3.2 css抽离

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

• 安装插件

  $ cnpm i extract-text-webpack-plugin -D

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

1.3.3 静态资源拷贝

安装插件

$ cnpm 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.4 其他配置

1.41 前端静态服务器配置

运行服务器需要本地安装 webpack webpack-cli webpack-dev-server -D

1. 命令行使用

   webpack-dev-server --port 9000 --open 
   

2. 写在 webpack.config.js 配置文件

   1. 命令行使用不方便，可以在配置 webpack.config.js 中配置

   
   devServer:{
   	port: 8088,
   	open: true
   }
   

   2. 在package.json scripts 标签下添加

   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "dev": "webpack-dev-server" //不用加参数，因为在配置文件配置过了，直接输入npm run dev 开启服务器
    }
    	or
     "scripts":{
        "dev": "webpack-dev-server  --port 8088 --open" //直接在 scripts 写参数， 不需要在webpack配置文件中配置
     }
   

1.4.2 省略引入文件名后缀

 resolve: {
    extensions: ['.js', '.css', '.json', '.jsx', '.vue', '.png', '.sass']
 }

1.4.3 配置文件拆分

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":   "webpack --config config/webpack.config.dev.js",
    "build": "webpack --config config/webpack.config.prod.js",
    "server":  "webpack-dev-server --config config/webpack.config.dev.js",
    "prod": "webpack-dev-server --config config/webpack.config.prod.js",
    "devAndStart" : "npm run dev & npm run server",
    "buildAndStart": "npm run build & npm run prod "
  },

1.4.4 错误资源定制

// 在webpack.config.js中添加如下配置项：
devtool: 'source-map'  
制定报错信息的源,不然错误会指向编译打包后的代码

2. 多页面配置

2.1 基础功能

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

// 2. 导出模块
module.exports = webpackConfig