webpack学习笔记

webpack

webpack是一个模块打包器（构建工具），它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器使用，可以胜任转换（transform）、打包（bundle）或包裹（package）任何资源（resource or asset）

简言之就是：将生产环境中的部分代码（运行也依赖）打包进项目中，使其在运行环境可以直接运行

目前框架的脚手架几乎做到零配置，直接基于webpack再封装了一层

原理及概念

• 树结构：在一个入口文件中引入所有资源，形成所有依赖关系树状图

• 模块：模块可以是ES6模块，也可以是commonJS或者AMD模块，对于webpack来说，一个资源也是模块

• chunk：打包过程中被操作的模块文件叫做chunk，例如异步加载一个模块就是一个chunk

• bundle：bundle是最后打包后的文件，最终文件可以和chunk长得一模一样，大部分情况下他是多个chunk的集合，因此最终生产的bundle数量可能不等于chunk的数量

  

基础使用

• 创建项目目录

• 初始化npm：npm init -y

• 安装webpack以及webpack-cli、webpack-dev-server：npm install webpack webpack-cli webpack-dev-server -D

• 创建src目录或根据需要创建下面的子目录

• webpack --mode production打包成运行模式

  可以看到默认生成dist目录，js文件合并成main.js ctrl+alt+L可以调整换行

• webpack --mode development打包成开发环境

• 可以直接将上述两条指令写进package.json，更方便运行打包命令

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "dev": "webpack --mode development",
      "build": "webpack --mode production"
    },
    //...
  }
  

  运行 npm run dev 或 npm run build即可执行打包命令

核心概念

• entry 入口，指示以哪个文件作为入口起点开始打包，分析构建内部依赖图，可以有一个或多个
• output 输出，指示打包后的资源bundles输出到哪里，以及如何命名
• loader 处理非JS的资源，如CSS、img等，处理成webpack可以识别的资源（只能js或json）
• plugins 插件 可用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等
• mode 模式指示webpack使用相应模式的配置，开发模式development配置简单，能让代码本地调试运行的环境；生产模式 production，代码需要不断优化达到性能最好，能让代码优化上线运行的环境，都会自动启用一些插件，生产模式使用插件更多

核心配置项webpack.config.js

//webpack.config.js
//resolve用来拼接绝对路径的方法
const {resolve} = require('path')
module.exports = {
    entry:'./src/index.js',

    output: {
        //输出文件名
        filename:'[name].js',
        path: resolve(__dirname,'build')
    },

    //loader 处理CSS image等
    module:{
        rules: [

        ]
    },

    //可以处理html资源
    plugins: [

    ],

    /*mode:"production" //development|| production 已经把这两种模式写进package.json中了*/
}

webpack打包html资源

• 使用插件（plugins）对HTML文件进行处理（html-webpack-plugin）

• 使用步骤：

  • 下载安装 npm i html-webpack-plugin -D

  • 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin');

  • 使用插件

        plugins: [
            //使用插件
            new HtmlWebpackPlugin({
                //要拿哪些打包,打包出的目录文件叫什么
                template: "./src/index.html",
                filename: "demo.html"
            }),
        ],
    

    自动打包到文件 demo.html中，并引用了编译生成的资源（JS/CSS）

• 打包多个html

  • 多个entry，每个html一个entry

  • 新建多个HtmlWebpackPlugin

    //多个entry
    entry{
        vendor: ['jquery','./src/js/common.js'],//通用js
        index:"./src/js/index.js",
        cart:"./src/js/cart.js"    
    },
    //负责打包html文件，将js注入到html中，minify压缩html
    plugins: [
            new HtmlWebpackPlugin({
                template: "./src/index.html",
                filename: "index.html",
    			chunks:["index","vendor"]
                minify: {
                    collapseWhitespace:true,
                    removeComments:true
                }
            }),
        	new HtmlWebpackPlugin({
                template: "./src/cart.html",
                filename: "cart.html",
    			chunks:["cart","wendor"]
                minify: {
                    collapseWhitespace:true,
                    removeComments:true
                }
            }),
        ],  
    

压缩JS和HTML代码

• js代码只要设置成生产模式（production）模式，会自动压缩

• 若想在开发环境下压缩HTML

   plugins: [
          //使用插件
          new HtmlWebpackPlugin({
              //要拿哪些打包,打包出的目录文件叫什么
              template: "./src/index.html",
              filename: "demo.html",
  
              //压缩html代码
              minify: {
                  //移除空格
                  collapseWhitespace:true,
                  //移除注释
                  removeComments:true
              }
          }),
      ],
  

webpack打包CSS资源

下载后直接使用，不需要引用

npm i css-loader style-loader -D

• 下载css-loader处理css中的 @import和 url这样的外部资源

• 下载style-loader把样式插入到DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的innerHTML中

• 使用

      //loader
      module:{
          rules: [
              {test:/\.css$/, use:['style-loader','css-loader']}
  
          ]
      },
  

提取CSS为单独文件

css内容会打包在js文件中，可以使用插件提取成单独的CSS文件

• 下载插件 npm i mini-css-extract-plugin -D

• 在webpack.config.js中引入插件 const MiniCssExtractPlugin = require('mini-css-extract-plugin');

• 在plugin模块中使用插件

  • plugins:[new MiniCssExtractPlugin()],
  • 通过参数filename重新命名提职的css文件
  • new MiniCssExtractPlugin({filename:'./css/demo.css'})

• 在CSS的rules中，使用MiniCssExtractPlugin.loader取代style-loader，提取js中Css内容为单文件

  • {test:/\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader']}
  • 如果sass和less也提取成单独css文件，也将style-loader换成MiniCssExtractPlugin.loader {test:/\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']}

• 将SCSS或LESS打包（需要先转成CSS）

  • 下载 npm i sass-loader less-loader - D(-D表示开发环境)

  • 规则中使用

    module:{
        rules:[
            {test:/\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader']},
            {test:/\.scss$/, use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']},
            {test:/\.less$/, use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']}
        ]
    }
    

    如果报错 cannot find module ‘sass’，需要安装 npm install node-sass

处理CSS的兼容性

需要postcss处理，下载两个包 post-loader和postcss-preset-env

npm i postcss-loader postcss-preset-env -D

postcss会找到package.json中的browerslist里面的配置，通过配置加载css的兼容性修改loader的配置，新版需要写postcss.config.js，less和sass兼容性同理

{test:/\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']}

开发服务器devServer配置

devServer给我们提供了开发过程中的服务器，是一个使用了express的Http服务器，它的作用主要是为了监听资源文件的变化，该http服务器和client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-server就会实时地进行编译，不再需要我们每次改动后再次编译

npm install webpack-dev-server

• 只会在内存中编译，不会有任何输出，下载webpack-dev-server包
• webpack-dev-server不能读取webpack.config.js的配置output
• 启动devServer指令为：npx webpack serve 本目录执行
• webpack5无法刷新，解决：webpack添加配置：target:'web'

在webpack.config.js文件中添加配置

devServer:{
    contentBase: resolve(__dirname,'build'),
    //启动gzip压缩
    compress:true,
    //设置服务器端口号
    port:3000,
    //自动打开浏览器
    open:true
}