webpack4.x学习记录之基础配置

前言

webpack想必大家都不陌生，大都知道webpack是一个模块打包工具，现在很多项目的构建也都离不开webpack，但是我之前从没有去真正了解过Ta的配置，因为现有的框架基本都已经替我们完成了这部分的操作，学习这个的一个原因是，公司小程序框架是用gulp搭建的，功能不是很完善，打包的速度也不是很理想，所以想通过学习webpack搭建一个更优的小程序框架。这也是本次学习的一个终极目标。

核心概念

入口（entry)：指定一个入口起点，作为构建内部依赖的开始。
输出（output)：设置webpack处理后的包输出的路径以及如何命名这些文件，
loader：处理非js文件，因为webpack自身只能识别js，loader将所有类型的文件转换成webpack能够处理的有效模块，这样就可以用webpack的打包能力，对文件进行处理。

test属性，用于标识[正则匹配]需要被对应的loader进行转换的文件；

use属性，表示进行转换时，应该使用哪一个loader；loader加载是从下到上，从右到左执行的。
插件（plugins)：用于执行范围更广的任务，包括从打包优化和压缩，一直到重新定义环境中的变量。可以处理各种任务。
模式：通过选择 development 或 production 之中的一个，来设置 mode 参数，可以启用相应模式下的 webpack 内置的优化。

简单配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
   // 入口文件 
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 启一个本地服务，监听代码变更，自动打包运行，方便在开发环境进行调试
  devServer: {
    contentBase: './dist', // 值得是在哪个目录下启动该服务
    open: true,
    port: 8888,
    hot: true,
    hotOnly: true
  },
  // htmlWebpackPlugin 会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个HTML文件中；cleanWebpackPlugin 会在打包之前，自动清除dist文件下的内容，然后再执行打包操作。
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin();
    new webpack.HotModuleReplacementPlugin();
  ],
  // 对非js文件进行处理 配置不同文件的加载器
  module: {
    rules: [
      // 图片文件打包
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            // placeholder 占位符 这里表示打包后的图片名字不变
            name: '[name].[ext]',
            // 打包后生成的路径
            outputPath: 'images/',
            // 表示 如果图片小于2048字节（2kb），则打包到main.js中，如果大于2048字节 会打包到images文件里(这里和file-loader功能一样)
            limit: 2048
          }
        }
      },
			// css文件打包
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  },
  mode: 'development' // 代码按照开发环境进行打包，打包的代码不会被压缩
}

SourceMap的配置

source-map 错误映射打包出来的代码出错时定位源代码错误位置【如果不配置，错误定位是在打包后的目标文件中】

如果是开发环境(development)则用以下配置较好；如果是线上生产环境(production)去掉 eval较好；

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map'
}

使用webpackDevServer提升开发效率

webpack –watch：通过在package.js中配置scripts，可以自动监听打包后的文件变化。但是不会启动本地服务。
webpackDevServer：通过在webpack.config.js中配置 devServer ；在package.js中的scripts下配置 "start": "webpack-dev-server" 命令；可以在本地启一个服务，打包并自动监听代码变化，修改源代码会重新打包；
配置

下载包键入命令：cnpm i webpack-dev-server -D

webpack.config.js

通过配置 devServer 会自动启一个本地服务，监听代码更改，自动刷新页面;

open：true 自动打开本地默认浏览器；

port：端口配置【默认8080】
1
2
3
4
5
6
7
module.exports = {
devServer: {
contentBase: './dist',
open: true,
port: 8888
},
}
package.js
1
2
3
4
"scripts": {
"watch": "webpack --watch",
"start": "webpack-dev-server"
},
有了以上的配置，可以运行 npm run start 来打包运行项目；然后修改源代码，发现页面在浏览器已经自动更新。

热模块更新

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。

配置

引入webpack模块
更新 webpack-dev-server 的配置，即增加 hot: true
在plugins里使用插件

const webpack = require('webpack');
module.exports = {
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8888,
    hot: true,  
    hotOnly: true // 即使HMR功能没有生效，也不想浏览器刷新时配置hotOnly为true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(),
    // 热更新插件
    new webpack.HotModuleReplacementPlugin()
  ],
}

使用Babel处理ES6语法

下包键入命令：cnpm i babel-loader @babel/core -D
只用 babel-loader 是无法转换ES6语法的，需要下载语法转换的包

键入命令 cnpm i @babel/preset-env -D
虽然用babel把ES6语法转为了ES5，但还会有些低版本的浏览器不兼容一些语法，需要下载polyfill包做补充；并在业务代码的最顶部引入例：import '@babel/polyfill'; 【注：polyfill会污染全局环境】

键入命令 cnpm i @babel/polyfill -D

配置

module: {
	rules: [
		{
        test: /\.js$/,
        exclude: /node_modules/, // 表示如果匹配的js文件是node_modules文件下的，就没必要进行转换，因为该目录下的是第三方的模块，已经被转换了，不必重复操作。
        use: 'babel-loader',
        options: {
          presets: [['@babel/preset-env', {
            targets: {
              chrome: '67' // 表示当项目运行的浏览器的版本大于指定的版本时，会判断当前浏览器版本是否支持ES6的语法，如果可以很好的支持ES6语法，则不再进行ES5的转换
            },
            useBuiltIns: 'usage' // 表示当在页面引入polyfill做语法补充的时候，根据当前的业务代码来决定是否添加，减少打包体积
          }]]
        }
      },
	]
}

由于polyfill会污染全局环境，所以在开发类库和第三方模块的时候，不建议使用，取而代之的是 plugin-transform-runtime 组件

下包依次键入命令：

1
2
3

cnpm i @babel/plugin-transform-runtime -D;
cnpm i @babel/runtime -S;
cnpm i @babel/runtime-corejs2 -S;

配置

module: {
  rules: [
    {
      test: /\.js$/,
     	exclude: /node_modules/,
     	loader: "babel-loader" ,
      options:{ 
        // 这里取代的是 是上面的 presets的配置
        "plugins": [["@babel/plugin-transform-runtime",{
          "corejs": 2,
          "helpers": true,
          "regenerator": true,
          "useESModules": false
        }]]
      }
    }
  ]
}

babel配置较多时，一般会把options配置放在项目根目录下的 .babelrc 文件中

在根目录下创建一个名为 .babelrc 的文件；执行顺序：【从下往上从右往左】

{
	presets: [['@babel/preset-env', {
            targets: {
              chrome: '67'
            },
            useBuiltIns: 'usage'
          }]]
}

或

{
  "plugins": [["@babel/plugin-transform-runtime",{
          "corejs": 2,
          "helpers": true,
          "regenerator": true,
          "useESModules": false
        }]]
}

webpack对React代码的打包配置

下包键入命令：cnpm i @babel/preset-react -D

配置

{
	presets: [
    [
      '@babel/preset-env', {
            targets: {
              chrome: '67'
            },
            useBuiltIns: 'usage'
       }
    ],
    '@babel/preset-react'
  ]
}
// 执行顺序：从下往上，先对react代码进行转换，再对转换后的代码进行ES6 -> ES5的转换

总结

以上是webpack的常用基础配置，通过学习，对webpack有了进一步的了解，这里记录一下学习笔记。也希望能对大家有点帮助。