webpack5打包笔记

最新推荐文章于 2024-07-15 10:00:00 发布

xingxing12323

最新推荐文章于 2024-07-15 10:00:00 发布

阅读量671

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xingxing12323/article/details/113786453

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

webpack5是啥有啥作用

是啥：本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

作用：webpack 分析项目代码将可扩展的语言转换成浏览器可以认识的代码，优化压缩无用代码，压缩资源文件。

webpack安装和基本体验

一些需要了解的概念

树结构（依赖图）：在一个入口文件引入所有资源所形成的依赖关系树状图
模块：所有的资源都可以看做模块
chunk：打包过程中被操作的模块文件叫做chunk
bundel：bundel是最终打包后的文件。

基本体验

安装脚本

npm i webpack webpack-cli -D #安装webpack

程序内容

//one.js
let n = 100

function add(x, y) {
    return x + y;
}

function demo(str) {
    return str;
}

module.exports = {
    n,
    add,
    demo
}
//two.js
const {n, add, demo} = require("./one")
let b = 20
let sum = add(n, b)
module.exports = {sum}
//index.js
const {sum} = require("./two")
console.log(sum);

运行脚本（默认会在src下寻找index.js文件根据依赖图生成dist目录下的main.js文件

webpack --model development  
webpack --model production

在这里插入图片描述

webpack的配置文件

webpack 配置文件webpack.config.js
作用：指示 webpack 干那些活，当运行 webpack 指令时会加载其中配置
构建工具(webpack.config.js)基于nodejs平台运行的，模块化默认采用commonjs，而项目文件（src内文件）采用的是ES6语法

const {resolve} = require('path');
module.exports = {
     // webpack 配置
     /* 入口文件 */
     entry: './src/main.js',
     /* 输出 */
     output: {
         /* 输出文件名 */
         filename: "bulid.js",
         /* 输出路径 一般采用绝对路径 */
         path: resolve(__dirname, 'build')
     },
     /* loader配置 */
     module: {
         rules: [
         ]
     },
     /* plugins配置 */
     plugins: [
     ],
     /* 模式 */
     mode: "development" // development || production
 }

配置文件中的5大核心概念

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

entry 和 output

单入口单出口文件

 entry: './src/index.js',  //单入口单出口模式
 output: {
      //输出文件名
      filename: "build.js",
          //输出路径 一般采用绝对路径
      path: resolve(__dirname, 'build')
  },

在这里插入图片描述

多入口单出口文件

新建js文件three.js

console.log("这是第三个js");

 entry: ['./src/index.js','./src/three.js'], 
 output: {
      //输出文件名
      filename: "build.js",
          //输出路径 一般采用绝对路径
      path: resolve(__dirname, 'build')
  },

在这里插入图片描述

多入口多出口文件

 entry: ,  //单入口单出口模式
 output: {
      //输出文件名
      filename: "build.js",
          //输出路径 一般采用绝对路径
      path: resolve(__dirname, 'build')
  },

在这里插入图片描述

混合文件

    entry:{
        three: ['./src/three.js','./src/one.js'],
        index:'./src/index.js'
    },
    output: {
        filename: "[name].js",
        path: resolve(__dirname, 'build')
    },

打包的three.js中多出了one.js
在这里插入图片描述

打包html资源

下载 html-webpack-plugin 插件

npm i html-webpack-plugin -D

引用插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

配置使用插件

 plugins: [
        new HtmlWebpackPlugin()
 ],

使用单入口单出口打包
在这里插入图片描述

配置插件的属性

plugins: [
        new HtmlWebpackPlugin({
            // 复制 './src/index.html'文件， 并自动引入打包输出的所有资源（JS/CSS）
            template: "./src/index.html",
		   // 默认是index.html名称，通过filename设置输出文件名称
	        filename: "demo.html",
	        //设置压缩属性
	        minify: {
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComments:true
            }   
        })
    ],

配置多html文件打包

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   entry:{
        jq:'./src/js/jquery.js',
        card: ['./src/js/card.js','./src/js/oneb.js'],
        user:'./src/js/user.js'
    },
    output: {
        filename: "js/[chunkhash].js",
        path: resolve(__dirname, 'build')
    },
    /* loader配置 */
    module: {
        rules: []
    },
    /* plugins配置 */
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/html/card.html",
            filename: "card.html",
            chunks: ["card","jq"],
        }),
        new HtmlWebpackPlugin({
            template: "./src/html/user.html",
            filename: "user.html",
            chunks: ["user","jq"],
        })
    ],
    /* 模式 */
    mode: "development" // development || production
}

在这里插入图片描述

打包CSS资源

安装css-loader和style-loader
css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里

npm i css-loader style-loader -D

使用插件

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

用法使用

webpack打包less或sass资源

打包less

安装less依赖包

npm i less less-loader -D

添加配置

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

打包sass

安装sass依赖包

npm i node-sass sass-loader -D

添加配置

{test: /\.scss$/,use:["style-loader","css-loader",'sass-loader']}

效果

在这里插入图片描述

提取单独css文件

安装mini-css-extract-plugin提取插件

npm i mini-css-extract-plugin -D

配置使用

//文件头引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//roader中配置
{
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']
 }
//插件中的配置
new MiniCssExtractPlugin({
            filename: "./css/demo.css"
        })

效果

配置css的兼容性

安装插件

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

package.json中配置browserslist配置css兼容性

"browserslist": [
    "> 0.2%",  //兼容80%浏览器
    "last 2 versions",//兼容最新两个版本
    "not dead"//不要死掉的浏览器
  ]

配置兼容插件

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

新建配置文件postcss.config.js

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

效果

在这里插入图片描述

压缩css

npm i optimize-css-assets-webpack-plugin -D

const OptimizeCssAssetsWebpackPlugin =  require('optimize-css-assets-webpack-plugin');
 //压缩css插件配置
 new OptimizeCssAssetsWebpackPlugin()

在这里插入图片描述

打包图片

npm i url-loader file-loader html-loader -D

{
  test:/\.(png|gif|jpg|jpeg)$/,
    use:{
        loader: "url-loader",
        options: {
            limit: 8*1024,
            publicPath: './images/',
            outputPath: 'images/',
            name:'[name][hash:10].[ext]',
            esModele: false
        }
    }
},
{
    test: /\.html$/, loader: "html-loader"
}

在这里插入图片描述

打包其他资源

{
 exclude: /\.(html|js|png|gif|jpg|jpeg|css|less|scss)$/,
     loader: "file-loader",
     options: {
         publicPath: '../font/',
         outputPath: 'font/',
         name:'[name][hash:10].[ext]',
     }
 }