完全解决新手对webpack的恐惧!

我心飞翔 分类:javascript

仅掘金这个平台就有无数优秀的webpack文章,但为什么我还要再写一份呢。因为太多文章并不适合新手学习,甚至会让他们对webpack、对一些插件产生误解,所以我决定要写一篇能让新手不在害怕webpack的文章

前言你必须知道的知识 是非常重要的,务必认真观看!

前言

首先抛出结论,webpack是一个非常简单的工具,毫无难度可言。webpack阻碍很多人的根本原因是大家对一些概念的不熟悉、对webpack丰富的loader和plugin望而怯步。当你把概念弄清楚后,你自然而然的就知道自己需要什么loader和plugin了。

看完后你一定会说:“就这?webpack就这?”。

准备环境、版本

node: ^12.16.1

webpack: ^4.44.2

webpack-cli: ^3.3.12

webpack5升级了一些新特性,所以我们这篇文章以目前常用的webpack4来讲解。不过完全不用担心都出5了怎么还学4的问题,道理都是相通的,4都会了,5它不就是多点新特性了吗。

你必须知道的知识

webpack概念

webpack是一个现代JavaScript应用程序的静态模块打包器。如果你接触js够早的话,你一定知道最初的工程可没有这样的打包工具,一个文件就相当于一个模块,最终这些文件需要按照一定的顺序使用script标签引入html(因为如果顺序不对就会导致依赖变量丢失等错误问题)。但是这个写项目不仅麻烦而且不优雅,随着大前端的发展后面有了gulp、grunt,以及现在最流行的webpack。所以webpack本质就是为我们打包js的引用,而我们常听到各种loader、各种plugin、热更新、热模块替换等等都是webpack的一个升华,使得webpack能为我们提供更多的帮助。

  • loader:webpack本身只能打包js和json格式的文件,但实际项目中我们还有会css、scss、png、ts等其他文件,这时我们就需要使用loader来让它正确打包。

    • 总结:loader是处理编译js和json以外的文件时用的
    • 常见的loader:
    style-loader
    css-loader
    sass-loader
    ts-loader
    file-loader
    babel-loader
    postcss-loader
    ...
     
  • plugin:plugin可以在webpack运行到某个阶段时候,帮你做一些事情,类似react/vue中的生命周期。具体的某个插件(plugin)就是在webpack构建过程中的特定时机注入扩展逻辑来改变构建结果,作用于整个构建过程。

弄明白这些东西

  • postcss:postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具。你可以把他理解成babel,他本身作用不大,我们很多具体需求的实现都需要他的插件来完成,他本身更像一个平台。例如,项目中我们需要webpack自动的帮我们为css样式加上兼容性前缀,实际帮我们加上前缀的插件是autoprefixer,但他能为我们加前缀的前提又是我们有postcss。千万不要把postcss误解postcss成scss、less替代品
    • 对于“ PostCSS”一词,我们可以替代地指两件事:
      1. 该工具本身就是PostCSS(运行时会得到什么)npm install postcss,以及
      2. 该工具支持的PostCSS插件生态系统
  • babel:babel 是一个 JavaScript 编译器,他可以让我们不再考虑兼容性,尽情的使用下一代的 JavaScript 语法编程吧。但是要实现具体的语法转换,我们还是要使用他的插件才能实现
    • 在babel7后为我们提供了预设,可以让我们不再自己麻烦的对插件进行组合,想在什么环境运行就写什么预设即可(相当于每个预设选项中都帮你组合好了这个环境中需要用到的插件)
  • es6+语法:babel默认会转换语法,例如:let、const、() => {}、class
  • es6+特性:babel不会转换特性,特性需要js代码垫片来兼容低版本的浏览器。例如:Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise
  • @babel/core:@babel/core是babel的核心库,所有的核心api都在这个库里,这些api可供babel-loader调用
  • @babel/preset-env:这是一个预设的插件集合,包含了一组相关的插件,Bable中是通过各种插件来指导如何进行代码转换。该插件包含所有es6转化为es5的翻译规则
  • @babel/polyfill:@babel/preset-env只是提供了语法转换的规则,但是它并不能弥补浏览器缺失的一些新的功能,如一些内置的方法和对象,如Promise,Array.from等,此时就需要polyfill来做js的垫片,弥补低版本浏览器缺失的这些新功能。注意:Babel 7.4.0该包将被废弃
  • core-js:它是JavaScript标准库的polyfill,而且它可以实现按需加载。使用@babel/preset-env的时候可以配置core-js的版本和core-js的引入方式。注意:@babel/polyfill依赖core-js
  • regenerator-runtime:提供generator函数的转码

搭建webpack项目

初始化项目

  • 新建一个文件夹

    mkdir learnWebpack
     
  • 进入到文件夹中

    cd learnWebpack/
     
  • 初始化package.json文件

    # 可以输入配置
    npm init
    
    # 默认配置创建
    npm init -y
    
    # 是用npm init -y后得到的内容
    {
      "name": "learnwebpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
     

安装

  • 安装webpack、webpack-cli依赖

    # 我更喜欢yarn,当然你也可以使用npm
    yarn add webpack@4.44.2 webpack-cli@3.3.12 -D
     

创建目录

  • 根目录下创建src、src下创建index.js

  • 在index.js中添加一段代码:

    console.log('hello webpack')
     
  • 在package.json文件中的scripts字段中添加"start": "webpack"

      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack"
      }
     
  • 在命令行中执行yarn start,我们会发现编译成功,但有个警告!在webpack自动在根目录下创建了一个dist文件夹和dist文件夹中的main.js文件

    • 关于警告:ARNING 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: webpack.js.org/configurati…; 警告中已经说的很清楚了,我们没有设置mode字段。我们只需在webpack的配置中配置mode字段即可消除该警告

    • 关于dist文件夹和main.js文件 :这是webpack4当初宣传的零配置使用。很显然我们这里什么都没配置,就帮我们成功打包了一个src下的代码。该功能实际上是wabpack默认帮我们配置了一套简单的打包配置,让我们看看webpack默认为我们配置了什么:

      const path = require('path')
      module.exports = {
        extry: './src/index.js',
        output: {
          filename: 'main.js',
          path: path.resolve(__dirname, './dist') 
        }
      }
       
    • 注意:这份默认配置是不是太过简单了。看了这个配置后,我想你也知道为什么当我们创建的不是src或者src下不是index.js时候无法使用零配置功能的原因了

webpack的零配置

上面我们看到了,零配置很弱,真正的项目中他完全不可能满足我们的需求

我们想要自定义配置webpack的话,需要在根目录上创建一个webpack.config.js的文件,这个文件的内容可以覆盖webpack的零配置

  • 使用默认的配置文件:webpack.config.js
  • 使用其他配置文件:如yzyConfig.js,可以通过--config yzyConfig.js来指定webpack使用哪个配置文件来执行构建

未完待续。。。

回复

我来回复
  • 暂无回复内容