【零基础学习Webpack】webpack打包JS、图片

通过上一篇博文【零基础学习Webpack】webpack简介，打包css、html我们已经了解了webpack如何打包css以及html，接下来我们一起来了解webpack如何打包编译js

1、Webpack编译JS

默认情况下，webpack可以识别JS并进行打包，这里所说的打包JS，其目的如下：

目的：将ES6+转成ES5，从而保证，JS在低版本浏览器的兼容性。

安装：cnpm install babel-loader @babel/core @babel/preset-env -D

• babel-loader Webpack 中，转换 JS 的加载器

• @babel/core 包含 Babel 转换的核⼼ API

• @babel/preset-env 包含最新 JS 语法的转换规则

配置loader

{ 
    test: /\.m?js$/i,
    exclude: /node_modules/, // 排除不需要打包的⽬录
    use: {
        loader: 'babel-loader',
        options: {
        	presets: ['@babel/preset-env']
        }
    }
} 

注意：

• babel/prevent-env转换只能转化基本的语法，针对高级语法无法转化，例如promise，
• babel、polyfill可以转化所以JS新语法,
  ​ ①cnpm install @babel/polyfill -D ②入口文件引入： import '@babel/polyfill'
• core-js（按需转译JS新语法）
  ​ ①安装cnpm install core-js -D ②配置：按需配置：

  {
        test: /\.m?js$/i,
        exclude: /node_modules/, // 排除不需要打包的⽬录
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env', {
                  // 按需加载
                  useBuiltIns: 'usage',
                  corejs: 3,
                  // 指定浏览器兼容的版本
                  targets: {
                    chrome: '58',
                    ie: '9',
                    firefox: '60',
                    safari: '10',
                    edge: '17'
                  }}]]}}}

打包的时候注释掉之前打包的polyfill配置，重新打包即可

2、JS代码校验

2.1 安装：cnpm i eslint eslint-config-airbnb-base eslint-webpack-plugin eslint-plugin-import -D

① eslint: 检验JS代码格式的工具； ② eslint-config-airbnb-base：流行的js代码格式规范

③ eslint-webpack-plugin（Webpack 的 eslint 插件）④eslint-plugin-import（⽤于在 package.json 中读取 eslintConfig 配置项）

2.2 package.json中配置

"eslintConfig": {
    "extends": "airbnb-base"
  }

2.3 webpack.config.js中配置

const EsLintPlugin = require('eslint-webpack-plugin')
new EsLintPlugin()

此时打包会出现一下常规的错误，例如：空格问题，末尾分号问题，此时，我们可以设置Eslint自动解决常规的代码报错问题

new EsLintPlugin({
    // 自动解决常规的代码报错问题
    fix: true
})

也可以设置不校验，在要忽略检测的一行添加注释：// eslint-disable-next-line

// eslint-disable-next-line
window.showMsg = showMsg;

3、Webpack打包图片

3.1 file-loader 安装： cnpm install file-loader -D

入口文件引入图片资源

// 入口文件index.js中引入：
import pic from './image/my.jpg';
// eslint-disable-next-line
const img = new Image();
img.src = pic;
// eslint-disable-next-line
document.body.append(img);

配置loader

// 配置loader
{
    test: /\.(png|gif|jpe?g)$/i,
        use: {
            loader: 'url-loader'
        }
},

webpack打包即可在页面上看到我们追加的图片

场景2：如果我们要在css文件中引入图片做背景，那么需要在css-loader中配置配置如下：

{
   test: /\.less$/i,
   use: [
   {
     loader: 'css-loader',
     options: {
       esModule: false
     }
   }
  ]
},

3.2 url-loader cnpm install url-loader -D

// 配置loader
{
    test: /\.(png|gif|jpe?g)$/i,
        use: {
            loader: 'url-loader',
              options: {
                // 指定图片大小，小于该数值的图片，会被转成base64
                limit: 8 * 1024 ,// 8kb
                // name是图片原来的名称，ext是图片原来的后缀名
                name: 'image/[name].[ext]'
             }
        }
}

3.3 html-loader，处理静态模板cnpm install html-loader -D

// 模板中引入
<img src="./image/my.jpg" />
    
// 配置loader
{
    test: /\.(htm|html)$/i,
    loader: 'html-loader',
    options: {
      // 注意：需要配置      
      esModule: false
    }
 }

此时会发现，我们使用的ejs语法没有正常解析<title><%= htmlWebpackPlugin.options.title %></title>

所以说，html-loader只能处理静态模板

解决办法：修改图片引入方式，<img src="<%= require('./image/my.jpg') %>"> />。修改模板后缀为.ejs

new HtmlWebpackPlugin({
      template: './src/index.ejs',
      title: '我是测试的title'
    }),

重新打包即可。
【零基础学习Webpack】webpack简介，打包css、html
其他内容后续会持续更新。。。