Webpack的使用

2023-10-07 20:49:16

概述

webpack是node工作流工具，是一个模块打包器。它的主要目的是将JavaScript的文件打包到一起，打包将复杂的、浏览器不识别的文件、语法变为浏览器识别的文件和语法后用于在浏览器中使用

官网地址：https://webpack.docschina.org/

webpack的核销思想就是下面的图示：

Webpack的使用

 webpack的基本使用

安装webpack的相关依赖

我们需要-g全局安装webpack和webpack-cli

npm install webpack webpack-cli -g

我们可以通过-v来查看版本号

Webpack的使用

 在src文件夹中新建一个index.js文件

function fun(a,b){
    return a +b;
}
console.log(fun(1,2))

此时输入打包命令，注意webpack5和webpack4打包的时候会有稍许的不同，webpack5进行的是文件夹的创建，webpack4一下创建的是文件夹和文件

webpack ./src/index.js -o ./build/build.js --mode=development

表示将./src/index.js文件的内容打包到./build/build.js文件中，如果是webpack5,就表示build.js文件夹中的main.js，--mode=development表示的是打包开发环境

此时我们的build文件中就有了webpack打包的代码

Webpack的使用

 Webpack的使用

 还有一种打包方式是生产环境的打包

webpack ./src/index.js -o ./build/build.js --mode=production

Webpack的使用

 production打包的代码会进行压缩

production和development的区别

webpack进行打包的时候分为两种，一种是development（开发环境）面向开发者，一种是production（生产环境）面向用户

无论是开发环境还是生产环境，都是将ES6模块化编译为浏览器能识别的语法

两者有什么区别？

安装依赖的时候是有区别的，之前安装依赖的时候都是输入—-save **，比如

npm install –-save express或者 npm install express -S

此时的依赖无论是开发还是生产都需要用得到

Webpack的使用

如果只要是在开发环境用到的依赖，比如我们的webpack打包编译，在生产环境是不需要的，所以我们就单独给安装开发依赖 –-save -dev

npm install –-save -dev webpack 或者 npm install webpack -D

这种打包方式是有局限的，比如我们要打包css文件，此时会报错

Webpack的使用

 基本配置

需要有指导文件，指导webpack如何进行打包，webpack是依赖webpack.config.js来进行配置 的

webpack.config.js的配置

const {resolve}=require("path")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //打包模式development表示开发，production表示生产
    mode:"development"
}

此时输入命令webpack打包即可

Webpack的使用

 Webpack的使用

 配置样式

如果我们要打包样式文件，需要配置相关的loader

index.js中只引入了css文件

import "./index.css"

配置哪些loader就需要这些loader的依赖

此时我们需要配置css，所以我们需要安装css，style的相关依赖

npm install style-loader css-loader -D
const {resolve}=require("path")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //配置相关的loader
    module:{
        //配置规则，内部是json配置项，每一个json就代表一个loader
        rules:[
            {
                //引导打包文件和编译的文件为css文件
                test:/\.css$/,
                //内部执行哪些loader，loader的执行顺序是倒序的，后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码，添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式，内部是样式的字符串
                    'css-loader'
                ]
            }
        ]
    },
    //打包模式development表示开发，production表示生产
    mode:"development"
}

Webpack的使用

 此时打包css文件成功

如果还想配置less

需要安装less相关的loader

npm install less less-loader -D
const {resolve}=require("path")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //配置相关的loader
    module:{
        //配置规则，内部是json配置项，每一个json就代表一个loader
        rules:[
            {
                //引导打包文件和编译的文件为css文件
                test:/\.css$/,
                //内部执行哪些loader，loader的执行顺序是倒序的，后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码，添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式，内部是样式的字符串
                    'css-loader'
                ]
            },
            {
                //引导打包文件和编译的文件为css文件
                test:/\.less$/,
                //内部执行哪些loader，loader的执行顺序是倒序的，后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码，添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式，内部是样式的字符串
                    'css-loader',
                    // less-loader的作用是将less文件变为css文件
                    'less-loader'          
                ]
            }
        ]
    },
    //打包模式development表示开发，production表示生产
    mode:"development"
}

配置html文件

Webpack的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>12345789</h1>
</body>
</html>

上面的html文件没有任何的引入，没有script标签

index.js

function fun(a, b) {
  return a + b;
}

console.log(add(1,2))

上面的js文件也没有任何的文件引入，没有require或者import

此时我们需要配置打包html模板的plugin插件

npm install html-webpack-plugin -D
const {resolve}=require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //配置相关的loader
    module:{
        //配置规则，内部是json配置项，每一个json就代表一个loader
        rules:[
            {
                //引导打包文件和编译的文件为css文件
                test:/\.css$/,
                //内部执行哪些loader，loader的执行顺序是倒序的，后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码，添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式，内部是样式的字符串
                    'css-loader'
                ]
            },
            {
                //引导打包文件和编译的文件为css文件
                test:/\.less$/,
                //内部执行哪些loader，loader的执行顺序是倒序的，后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码，添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式，内部是样式的字符串
                    'css-loader',
                    // less-loader的作用是将less文件变为css文件
                    'less-loader'          
                ]
            }
        ]
    },
    plugins: [
        // 配置html的文件
        new HtmlWebpackPlugin({
          // template表示是引入的模板文件地址
          template: './src/index.html'
        })
      ],    
    //打包模式development表示开发，production表示生产
    mode:"development"
}

html-webpack-plugin作用会创建一个html文件，自动引入打包输出的资源，js/css文件

 Webpack的使用Webpack的使用

 

总结：

  •   html-webpack-plugin功能插件，作用就是自动让webpack识别模板，从而和入口文件进行整合，让浏览器可以进行展示
  •   html文件和js文件都不需要互相引用，webpack会自动整合
上一篇：webpack学习---优化-- babel缓存(让第二次打包构建速度更快)


下一篇：配置打包图片资源