webpack搭建React环境与各配置详解

2020-07-16 本文已影响0人正在刷新log

1 基础配置与详解

1.1 初始化项目

mkdir ReacDemo
cd  ReacDemo
mkdir src
mkdir dist
npm init -y

1.2 安装webpack

安装webpack 和webpack服务

cnpm i webpack webpack-cli webpack-dev-server -D

在项目跟目录下新建webpack配置文件webpack.config.js，配置文件的初始化内容为

module.exports = {
    mode: "development",//表识开发环境
    entry: ["./src/index.js"], // 入口文件
    output: { // 打包后输出目录
        // 输出目录
        path: path.join(__dirname, "dist"),
        // 文件名称
        filename: "bundle.js"
    },
    module:{}, // loader配置
    plugins:[],// 插件配置
    devServer:{}//开发服务
}

1.3 babel编译ES6,JSX等

安装babel依赖包

cnpm i babel-loader @babel/core @babel/preset-env  @babel/plugin-transform-runtime   @babel/preset-react -D

babel-loader webpack使用babel解析用到的loader,打包转换成es5语法
@babel/core babel核心包，使用babel解析的合并包
@babel/preset-env babel官方预设的一些转换babel需要用到的babel依赖
@babel/preset-react 解析react的jsx语法预设的一些依赖
关于babel的详细介绍具体可到babel官网了解

在项目跟目录下（和src同级）新建.babelrc文件，文件的内容为

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

在webpack.config.js文件中配置babel,打包转换es6及以上语法

module: {
        rules:[
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ]
            }
        ]
    }

1.4 插件 CleanWebpackPlugin

其实 clean-webpack-plugin 很容易知道它的作用，就是来清除文件的,就是说在为生产环境编译文件的时候，先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净，再生成新的.

cnpm install  clean-webpack-plugin -D
// 注意这个引入的坑，最新版的需要这样引入，而不是直接const CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
// 在webpack.config.js的plugins下配置
plugins: [
    new CleanWebpackPlugin() 
]

1.5 使用插件 HtmlWebpackPlugin

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

插件参数详解

title 生成html文件的标题
filename 输出的html的文件名称
template html模板所在的文件路径，根据自己的指定的模板文件来生成特定的 html 文件
inject 注入选项。有四个选项值 true, body, head, false.

  1. true：默认值，script标签位于html文件的 body 底部
  2. body：script标签位于html文件的 body 底部（同 true）
  3. head：script 标签位于 head 标签内
  4. false：不插入生成的 js 文件，只是单纯的生成一个 html 文件

favicon 给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名
minify minify 的作用是对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩。

plugins:[
        new HtmlWebpackPlugin({
    //部分省略，具体看minify的配置
    minify: {
     //是否对大小写敏感，默认false
    caseSensitive: true,
    
    //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled  默认false
    collapseBooleanAttributes: true,
    
    //是否去除空格，默认false
    collapseWhitespace: true,
    
    //是否压缩html里的css（使用clean-css进行的压缩） 默认值false；
    minifyCSS: true,
    
    //是否压缩html里的js（使用uglify-js进行的压缩）
    minifyJS: true,
    
    //Prevents the escaping of the values of attributes
    preventAttributesEscaping: true,
    
    //是否移除属性的引号 默认false
    removeAttributeQuotes: true,
    
    //是否移除注释 默认false
    removeComments: true,
    
    //从脚本和样式删除的注释 默认false
    removeCommentsFromCDATA: true,
    
    //是否删除空属性，默认false
    removeEmptyAttributes: true,
    
    //  若开启此项，生成的html中没有 body 和 head，html也未闭合
    removeOptionalTags: false, 
    
    //删除多余的属性
    removeRedundantAttributes: true, 
    
    //删除script的类型属性，在h5下面script的type默认值：text/javascript 默认值false
    removeScriptTypeAttributes: true,
    
    //删除style的类型属性， type="text/css" 同上
    removeStyleLinkTypeAttributes: true,
    
    //使用短的文档类型，默认false
    useShortDoctype: true,
    }
    }),
]

hash hash选项的作用是给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false

配置webpack.config.js

// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Hello World app',
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
      filename: 'index.html', // 最终创建的文件名
      template: path.join(__dirname, 'src/template.html') // 指定模板路径
    })
  ]

1.6 使用 source-map

source map就是帮助我们定位到错误信息位置的文件。正确的配置source map，能够提高开发效率，更快的定位到错误位置。详细了解请点击
在webpack.config.js中选项加上如下这句话

devtool:"cheap-module-eval-source-map",// 开发环境配置
devtool:"cheap-module-source-map",   // 线上生成配置

1.7 使用 WebpackDevServer

webpack-dev-server就是在本地为搭建了一个小型的静态文件服务器，有实时重加载的功能，为将打包生成的资源提供了web服务
开发环境中我们可以启动一个devServer静态文件服务器，预览我们的项目,配置如下

contentBase: 静态文件地址
port: 端口号
host: 主机
overlay: 如果出错，则在浏览器中显示出错误
compress: 服务器返回浏览器的时候是否启动gzip压缩
open: 打包完成自动打开浏览器
hot: 模块热替换需要webpack.HotModuleReplacementPlugin插件
inline: 实时构建
progress: 显示打包进度
devtool: 生成代码映射，查看编译前代码，利于找bug
webpack.NamedModulesPlugin: 显示模块的相对路径。

devServer: {
    hot: true,
    contentBase: path.join(__dirname, "./dist"),
    host: "0.0.0.0", // 可以使用手机访问
    port: 8080,
    historyApiFallback: true, // 该选项的作用所有的404都连接到index.html
    proxy: {
      // 代理到后端的服务地址，会拦截所有以api开头的请求地址
      "/api": "http://localhost:3000"
    }
  }

1.8 编译css和scss

cnpm install css-loader style-loader sass-loader node-sass -D
 
{
  test: /\.scss$/,
    use: [
      "style-loader", // 创建style标签，并将css添加进去
      "css-loader", // 编译css
      "sass-loader" // 编译scss
    ]
}

1.9 集成postcss

最关心的还是这有啥用啊？自动增加前缀， postcss-cssnext允许你使用未来的css特性，并做一些兼容处理

修改webpack配置文件下的module

cnpm install  postcss-loader postcss-cssnext -D
 
{
    test: /\.scss$/,
        use: [
            "style-loader", // 创建style标签，并将css添加进去
            "css-loader", // 编译css
            "postcss-loader",
            "sass-loader" // 编译scss
        ]
}

在跟目录下新建一个postcss.config.js文件，文件内容为：

module.exports = {
    plugins: {
        'postcss-cssnext': {}
    }
};

1.10 处理图片

file-loader file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL
url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理

cnpm i file-loader url-loader -D
 
file-loader 解决css等文件中引入图片路径的问题
url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝
{
    test: /\.(png|jpg|jpeg|gif|svg)/,
    use: {
      loader: 'url-loader',
      options: {
        outputPath: 'images/', // 图片输出的路径
        limit: 10 * 1024
      }
    }
}

2 webpack 优化

2.1 alias对文件路径优化

extension: 指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
alias: 配置别名可以加快webpack查找模块的速度
修改webpack.config.js 其中resolve和配置中的entry同级

resolve: {
    extension: [".js", ".jsx"],
    alias: {
      "@": path.join(__dirname, "src"),
      pages: path.join(__dirname, "src/pages"),
      router: path.join(__dirname, "src/router")
    }
  }

2.2 MiniCssExtractPlugin ，抽取 css 文件

如果不做配置，我们的css是直接打包进js里面的，我们希望能单独生成css文件。因为单独生成css,css可以和js并行下载，提高页面加载效率

cnpm install mini-css-extract-plugin -D
 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 {
        test: /\.scss$/,
        use: [
          // "style-loader", // b不再需要style-loader要已经分离处理
          MiniCssExtractPlugin.loader,
          "css-loader", // 编译css
          "postcss-loader",
          "sass-loader" // 编译scss
        ]
      },
 
 plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]

2.3 代码分割按需加载、提取公共代码

我们现在看到，打包完后，所有页面只生成了一个bundle.js,当我们首屏加载的时候，就会很慢。因为他也下载了别的页面的js了,也就是说，执行完毕之前，页面是完！全！空！白！的！。如果每个页面单独打包自己的js，就可以在进入页面时候再加载自己的js，首屏加载就可以快很多

// optimization 和配置中的entry同级
// 代码分割按需加载、提取公共代码
    optimization: {
        usedExports: true,
        splitChunks: {
            chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
            cacheGroups: {
                // 公共代码打包分组配置
                jquery: {
                    name: 'jquery',
                    test: /[\\/]node_modules[\\/]jquery[\\/]/
                },
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors'
                }
            }
        },
    },

2.4 文件压缩

webpack4只要在生产模式下，代码就会自动压缩

mode:productioin

2.5 暴露全局变量

new webpack.ProvidePlugin({
      $: 'jquery', // npm
    })

2.6 DllPlugin插件打包第三方类库

项目中引入了很多第三方库，这些库在很长的一段时间内，基本不会更新，打包的时候分开打包来提升打包速度，而DllPlugin动态链接库插件，其原理就是把网页依赖的基础模块抽离出来打包到dll文件中，当需要导入的模块存在于某个dll中时，这个模块不再被打包，而是去dll中获取

未完待续。。。