webpack基础知识

定义

Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

五个核心概念

• Entry

入口(Entry)指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

• Output

输出(Output)指示webpack打包后的资源(bundles)输出到哪里去，以及如何命名.

• Loader

Loader让webpack能够去处理那些非javascript 文件(webpack自身只理解JavaScript)

• Plugins

插件(plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

• Mode

模式(Mode)指示webpack使用相应模式的配置。

额外的配置

• Source Map

当webpack打包源代码时，可能会很难追踪到error和warning在源代码中的原始位置。为了方便追踪，javascript提供了source maps功能，可以将编译后的代码映射回原始源代码。

• HtmlWebpackPlugin

webpack打包后，仅生成bundle.js，需要一个HTML5文件，用来动态引入打包生成的bundle文件

• DevServer

安装 npm install webpack-dev-server

const {resolve}  = require 'path'

module.exports = {
 // 开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
 devServer:{
     //项目构建后路径
      contentBase:resolve(__dirname,'build),
      // 启动gzip压缩
      compress:true,
      // 端口号
      port:3000,
      // 自动打开浏览器
      open:true
 }
}
复制代码

代码发生变化后自动编译代码

• cross-env

通过cross-env配置环境变量，区分开发环境和生产环境。

安装：npm install --save-dev cross-env
修改package.json文件：
{
  "scripts":{
     'dev':'cross-env NODE_ENV=development webpack serve --open --config config/webpack.dev.js',
     'build':'cross-env NODE_ENV=production webpack --config config/webpack.prod.js'
  }
}
运行代码：
npm run dev:开发环境代码
npm run build :生产打包
复制代码

进阶配置

• Asset Modules

webpack5中，可以使用内置的Asset Modules，将images图像混入系统中，大图片建议上传到CDN中，提高加载速度。也可以使用Asset Modules 接收文体文件。

module.exports ={
   module:{
      rules:[
      // 对图像进行处理
        {
            test:/\.(png|svg|jpg|jpeg|gif)$/i,
            include:[resolveApp('src')],
            type:'asset/resource'
        },
        // 对字体进行处理
        {
             test:/.(woff|woff2|eot|ttf|otf)$/i,
             include:[resolveApp('src')],
             type:'asset/resource'
        }
      ]
   }
}
复制代码

• 配置css、Sass、PostCss

在JS模块中import一个css文件，需要安装并配置style-loader和css-loader.
style-loader用于将CSS插入到DOM中，通过使用多个<style></style>自动把styles插入到DOM中
css-loader对@import和url()进行处理，使其模块化。

安装css相关依赖：
npm install --save-dev style-loader css-loader
修改配置：
module.exports ={
   module:{
     rules:[
        {
        test:/\.css$/,
        // style-loader 将JS字符串生成为style节点，添加到             head中生效。
        // css-loader 将css转化成CommonJS模块加载到JS中，              内容是样式字符串
        // loader的执行顺序是从右到左/从下到上。
        use:['style-loader','css-loader']
        }
     ]
   }
}
复制代码

使用Plugins打包

• html-webpack-plugin

打包项目时，webpack会把打包后的内容放到dist目录下，需要自行再去创建一个index.html来引入核心文件。会显得略有麻烦。

安装plugin:
npm install html-webpack-plugin -D
引入：
const HtmlWebpackPlugin = require('html-webpack-plugin')
配置：
module.exports = {
    plugins: [
       // 功能：默认会创建一个空的html,自动引入打包输出的所有资源(JS/CSS)
       // 需求：需要有结构的HTML文件
       new HtmlWebpackPlugin({
       // 复制'./src/index.html'文件，并自动引入打包输出的所有资源(JS/CSS)
          template:'./src/index.html'
       })
    ]
}

复制代码

配置踩坑集锦

• 配置图片问题，对于html文件中直接使用image标签中的src属性，图片不会显示。

解决办法:

安装：npm install html-loader
module.exports = {
   module:{
      rules:[
        {
          test:/\.html$/,
          // 处理html文件的img图片（负责引入img,从而被url-loader进行处理）
          loader:'html-loader
     }
      ]
   }
   
}
复制代码

但是：上述配置还是不能解析文件。因为html-loader引入图片是commonjs,而默认的解析使用的是url-loader，这个解析的是ES6模块。此时解决办法为：

url-loader依赖于file-loader

安装 npm install file-loader url-loader

module.exports = {
   module:{
     rules:[
        {
          test:/\.(jpg|png|gif)$/,
          loader:'url-loader',
          options:{
              // 关闭url-loader的ES6模块化，使用commonjs解析
              esModule:false,
              //给图片进行重命名，[hash:10]取图片的hash的前10位，[ext]取文件原来扩展名
              name:'[hash:10].[ext]'
      }
     }
     ]
   }    
}
复制代码