webpack

访问量:1496 创建时间:2021-03-24

概念

树结构：在一个入口文件中引入所有的资源，形成所有依赖关系树状图。
模块：模块可以是ES6模块，也可以是commonJS或者AMD模块，对于webpack来说，所有资源（css,img...）
chunk：打包过程中操作的模块文件叫做chunk,例如异步加载一个模块就是一个chunk。
bundle: 是最后打包生成的文件，最终文件可以喝chunk长得一模一样，但是大部分情况下是多个chunk的集合。
为了优化最后产出的bundle数量可能不等于chunk数量，多个chunk可能被组合到一个bundle中。

webpack 安装体验

创建项目目录 webpack-test
进入目录初始化npm， npm init -y
安装webpack及webpack-cli: npm install webpack webpack-cli -D (-D == --save-dev)
创建src目录，根据需要创建子目录。
在src下创建一些js文件，和一个主入口文件index.js
控制台运行命令: webpack --mode=development (开发环境,生成的打包文件有注释，多行显示) webpack --mode=production (生产环境，生成的文件单行，无注释)
可以使用node运行打包后的资源，也可以使用html引入打包后的资源。

创建src/one.js

let n = 100;
function add(x,y){
    return x+y;
}

function demo(string){
    return string;
}
/*ES6 语法如果 key：value相同，写一个即可n:n 可以写为n,add:add可以写为add */
module.exports = {
    n,
    add:add,
    demo:demo,
}

创建src/two.js

const {n,add,demo} = require('./one')

let b=20;
let sum =add(n,b)

module.exports={sum}

创建src/index.js

const sum = require('./two')
console.log(sum)

webpack核心概念配置

Entry 入口
Output 输出结果
Loader 模块转换器
Module 模块
Chunk 代码块
Plugin 插件
mode 模式

Entry

entry 是配置模块的入口，它指示 Webpack 执行构建的第一步。可以在配置文件中配置 entry 属性，来指定一个或多个入口点 entry 类型有三种：字符串（一个入口，一个chunk一个输出文件）、数组（多入口1个输出）、对象（有几个入口，生成几个chunk,输出几个bundle文件）。

String ："./src/entry" 入口模块的文件路径，可以是相对路径 array : ["./src/entry1", "./src/entry2"] 入口模块的文件路径，可以是相对路径。与字符串类型不同的是数组可将多个文件打包为一个文件 object ： { a: './src/entry-a', b: ['./src/entry-b1', './app/entry-b2']} 配置多个入口，每个入口有一个 Chunk

Output

output 配置如何输出最终想要的代码。output 是一个 object，里面包含一系列配置项。

filename 用于输出文件的文件名。 path 目标输出目录的绝对路径，必须是绝对路径。

module、Loader

module 配置如何处理模块配置Loader Loader 可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。

use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

Plugins

Plugin 用于扩展 Webpack 功能，各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情。配置 Plugin Plugin 的配置很简单，plugins 配置项接受一个数组，数组里每一项都是一个要使用的 Plugin 的实例，Plugin 需要的参数通过构造函数传入。当然使用 Plugin 的难点在于掌握 Plugin 本身提供的配置项，而不是如何在 Webpack 中接入 Plugin。想实现某项 Webpack 没有的功能去 gayHub 碰碰运气吧！哦不，是 github 碰碰运气吧！

Chunk

Chunk，代码块，即打包后输出的文件。 Webpack 会为每个 Chunk 取一个名称，可以根据 Chunk 的名称来区分输出的文件名。 filename: '[name].js' 复制代码一个入口文件，默认 chunkname 为 main。除了内置变量 name，与 chunk 相关的变量还有：

id Chunk 的唯一标识，从0开始 name Chunk 的名称 hash Chunk 的唯一标识的 Hash 值 chunkhash Chunk 内容的 Hash 值

创建webpack的配置文件 webpack.config.js(默认文件名), 执行命令webpack 测试打包

const {resolve}=require('path')
module.exports = {
    mode:'development',
    entry: './src/index.js',
    output:{
      filename:  './dist/main.js',
      path:resolve(__dirname,'build')
    }
}

打包html资源

使用插件对html文件进行处理（html-webpack-plugin -D）下载npm i html-webpack-plugin -D 引用插件 const HtmlWebpackPlugin = require('html-webpack-plugin'),使用如下（配置webpack.config.js文件，注意创建template index.html文件）

const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports = {
    mode:'development',
    entry: './src/index.js',
    output:{
      filename:  './dist/main.js',
      path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin(
            {
                template:"./src/index.html",
                filename:"demo.html"
            }
        )
    ]
}

打包css

css-loader 作用处理css中的@import和url这样的外部资源 style-loader 作用是把样式插入到DOM中，方法是在header中插入一个style标签，并把样式写入到这个标签的innerHTML里（css打包到js中，html运行时js加载css到style中）。

安装 npm i css-loader style-loader -D ;修改webpack.config.js,增加module配置

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

打包less或者sass资源

因为css只是提供单纯的属性描述，并不具有变量，条件语句等，css的特性导致它难以组织和维护。 Sass和less都属于css预处理器，定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加一些编程的特性，将css作为目标生成文件，然后开发者使用这种语言进行css编码工作。 less 需要npm下载less和less-loader sass 需要npm下载node-sass和sass-loader

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

提取css独立文件

不将css打包到js文件中，安装插件 npm i mini-css-extract-plugin -D ,在webpack.config.js中引入const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    mode:'development',
    entry: './src/index.js',
    output:{
      filename:  './dist/main.js',
      path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin(
            {
                template:"./src/index.html",
                filename:"demo.html"
            }
        ),
        new MiniCssExtractPlugin({
            filename:'main.css'
        })
    ]
}

处理css兼容性

使用postcss处理，下载post-loader和postcss-preset-env, npm i postcss-loader postcss-preset-env -D 创建配置文件postcss.config.js ,文件内容如下

module.exports = {
    plugins:[
        require('postcss-preset-env')()
    ]
}

修改webpack.config.js

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

打包图片资源

npm i file-loader url-loader -D，修改webpack.config.js文件如下：

const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    mode:'development',
    entry: './src/index.js',
    output:{
      filename:  './dist/main.js',
      path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']
            },
            {
                test:/\.scss$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']
            },
            {
                test:/\.(png|jpg|gif|jpeg)/,
                loader:'url-loader',
                options:{
                    publicPath:'./images/',
                    outputPath:'images/',
                    limit:1024*8,
                    name:'[name]_[hash].[ext]'
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin(
            {
                template:"./src/index.html",
                filename:"demo.html"
            }
        ),
        new MiniCssExtractPlugin()
    ]
}

配置开发服务器devserver

安装:npm i webpack-dev-server -D ; 运行webpack serve 启动devserver (webpack5 配置参数target:"web" 才可以自动刷新浏览器); 因为devserver启动命令较长，通常在package.json的script段中配置短命令,配置后执行npm run dev 或者npm run build打包运行。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack serve --mode development --port 3000",
    "build":"webpack --mode production"
  },

devServer的参数也可以在webpack.config.js中配置。

devServer:{
    port:3001,
    compress:true,
    open:true
}

开发、生产环境优化

优化压缩、开发环境打包构建速度、优化代码调试、生产环境代码运行的性能等。

HMR 模块热替换, 开启方式在devServer中添加hot:true ，热更新需要配置entry数组，添加html入口文件，html文件才会被热更新

devServer:{
    port:3001,
    compress:true,
    open:true,
    hot:true
}

样式HMR功能，在开发环境中使用style-loader;

去除项目里的死代码（JS与CSS）

<< 上一章节

下一章节 >>

登陆评论: 使用GITHUB登陆