webpack脚手架基础能力搭建（二）

前端连环话
132 阅读3分钟

在上一节中我们讲解了如何从零开始搭建webpack脚手架，涵盖环境定义、入口和出口配置、样式处理配置等，本节将基于上一节的工程继续探索。

Crzcy，公众号：前端连环话webpack脚手架基础能力搭建（一）

1、js编译与解析

前端开发中ES6已经非常普及，甚至还有ES7、ES8等，然而浏览器对这些高阶语法支持并不友好，为了让浏览器能正常识别并解析运行，babel应运而生。babel其实是一个javaScript编译器，能让我们放心使用新一代js语法，比如箭头函数。

在webpack中使用babel-loader

npm i babel-loader -D

依赖三个插件@babel/core、@babel/preset-env、core-js

npm i @babel/core @babel/preset-env -D
npm i core-js -S

在开发环境和生产环境都需要对js做编译处理，因此在webpack.base.js文件中追加babel-loader处理

...
module.exports = {
  ...
    //loader模块处理
    module: {
      rules: [
        {
          test: /.js$/,
          use: [
            {loader: 'babel-loader'}
          ]
        }
      ]
    }
    ...
}

定义核心配置文件.babelrc

{
  'presets': [
    [
      '@babel/preset-env', //应用@babel/preset-env解析js
      {
        "useBuiltIns": "usage", //使用动态解析语法，根据兼容性转义
        "corejs":3//使用core-js3版本的js库来对低版本浏览器做兼容
      }
    ]
  ]
}

再定义当前项目兼容的浏览器范围，新增.browserslistrc文件

> 0.25%
last 2 versions

配置完成后可以通过

npx browserslist

查看当前项目支持的浏览器版本清单

browserslistrc配置清单

例子说明
> 1%全球超过1%人使用的浏览器
> 5% in US指定国家使用率覆盖
last 2 versions所有浏览器兼容到最后两个版本根据 CanIUse.com 追踪的版本
Firefox ESR火狐最新版本
Firefox > 20指定浏览器的版本范围
not ie <=8方向排除部分版本
Firefox 12.1指定浏览器的兼容到指定版本
unreleased versions所有浏览器的beta测试版本
unreleased Chrome versions指定浏览器的测试版本
since 20132013年之后发布的所有版本

接着可以在index.js中定义一些es6的map函数，Promise等测试是否正常编译。

2、文件处理

项目开发中，涉及到大量的图片和文件资源管理，图片一般存放在src和public目录下，两者存在一定差异，本章节将介绍webpack如何对图片处理。****

  • src下的处理

先在src下新建assets目录存放图片资源，并放入bg.png

在public的index.html文件中追加img标签，用来显示图片

<img id="img">

在main.scss中定义图片的基础样式

img{
  width: 100px;
  height: 100px;
}

在src的index.js中动态创建图片路径

import bg from '../src/assets/bg.png'
document.getElementById("img").src = bg

安装文件处理加载器，file-loader主要解决的是webpack会将src下的文件资源以数据形式追加到webpack-dev-server内存中，在开发环境中可以直接访问。并在打包构建之后，会将import引入的文件构建输出到dist目标目录下

npm i file-loader -D

webpack.base.js追加以下loader配置

...
module.exports = {
  ...
    //loader模块处理
    module: {
  rules: [
    ...
    {
      test: /.(png|jpg|bmp|svg|jpeg)$/,
      use: [
        {loader: 'file-loader'}
      ]
    }
  ]
},
  ...
  }

启动本地服务，验证是否生效

npm run serve
  • public下的处理

同样在public下放bg1.png，在index.html中新增img标签展示图片

<img src="bg2.png">

此时执行build打包构建命令，再访问dist目录下的index.html，会发现bg2图片并未显示，这时需使用copy-webpack-plugin插件将静态资源从public目标拷贝到dist目录中

npm i copy-webpack-plugin -D

修改webpack.prod.js，追加以下配置

...
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(base, {
  ...
    plugins: [
    ...
    //配置public静态资源拷贝到dist目录的插件
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname,'../public'),
          to: path.resolve(__dirname,'../dist'),
          globOptions: {
            //忽略掉同名文件
            ignore: ["**/index.html"]
          }
        }
      ],
      options: {
        concurrency: 100
      },
    })
    ]
})

再次执行

npm run build

此时，public下的静态资源也拷贝到dist目录，访问index.html可正常显示bg2.png图片。

3、source-map处理

首先测试一下在index.js中写点有问题的代码，比如打印未定义的变量aa，看浏览器控制台上的报错信息

console.log(aa);

启动本地服务后，查看浏览器控制台，发现有报错，但报错行和信息跟源码是不匹配的

这个时候就需要用到source-map了，它是源码映射文件，可以方便开发人员在开发环境和生产环境快速定位和分析问题

  • 本地环境处理：

在webpack.dev.js中追加以下配置

...
module.exports = merge(base, {
  ...
    //通过内联方式定义source-map
    devtool: 'inline-source-map',
  ...
})

inline-source-map的方式会将源码映射数据内联在js文件中，开发环境可以使用这种模式

启动本地服务看下报错提示吧****

  • 生产环境处理

在webpack.prod.js中追加以下配置

...
module.exports = merge(base, {
  ...
    //单独定义source-map文件
    devtool: 'source-map',
  ...
})

source-map的方式会单独生成map文件，并在bundle中通过sourceMappingURL引用该map文件，这种形式可以有效减少bundle文件大小，提高资源加载速度

注意：生产环境使用source-map要注意代码有泄露风险哦。。。

4、路径解析处理

由于开发环境和生产环境都需要使用import引入文件，可通过webpack配置全局的路径信息

在webpack.base.js中追加如下信息：

...
module.exports = {
  ...
    //配置全局的路径信息
    resolve: {
  //配置可以省略后缀的文件类型
  extensions: ['.vue','.js','.css','.scss'],
    //为全路径配置缩写@
    alias: {
    '@': path.resolve(__dirname, '../src')
  }
}
}

下面修改index.js引用scss文件的路径

//未配置全局路径时是这样的
//import '../src/css/main.scss'

//配置了resolve后是这样的
import '@/css/main'

启动本地服务，查看样式是否加载正常

到这里，webpack脚手架基础能力就基本具备了。 欢迎关注公众号【前端连环话】，一起分享、交流

前端连环话.png

avatar
文章
阅读
粉丝