【Webpack】与【Babel】详细说明介绍

来自湖南的阿晨

已于 2023-08-17 10:26:11 修改

阅读量683

点赞数 1

分类专栏：前端开发工具记录文章标签： webpack

于 2023-03-02 14:44:08 首次发布

本文链接：https://blog.csdn.net/weixin_52479803/article/details/129297105

版权

前端开发工具记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Webpack

webpack是一个前端资源加载/打包工具，会根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

在开始前你需要先理解一些核心概念：

入口(entry)，出口(output)，loader，插件(plugins)，模式(mode)，展示如下：

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
// 打包规则
module.exports = {
 //入口函数
 entry:"./src/main.js",
 //出口
 output:{
   path:path.resolve(__dirname,"./dist"),//编译成功后 文件输出到哪
   filename:"bundle.js"//命名
},
 //loader 用于转换某些类型的模块
 module:{
  rules:[{
   test:/\.css$/, //把项目中所有的.css结尾的文件进行打包
   use:["style-loader","css-loader"] //使用哪个 loader
  }]
 },
 //plugins(插件)则可以用于执行范围更广的任务；包括：打包优化，资源管理，注入环境变量
  plugins:[  
  new HtmlWebpackPlugin({
    template: path.join(__dirname, '/index.html'),
  }),
  new CleanWebpackPlugin()
 ],
 //模式 development=》开发模式, production=》生产、发布上线模式
 mode: 'production'
}

分享18个webpack插件，你千万要收藏好，留备用 (qq.com)

Webpack打包js文件

创建一个文件夹，cmd进入到终端，运行npm install -g webpack webpack-cli安装webpack webpack-cli，然后-v查看是否成功

再运行npm init -y 得到package.json文件

创建src文件夹，然后定义三个js文件，代码如下：

//textOne.js
exports.info = function(str){
   console.log(str);
   document.write(str);
}

//textTwo.js
exports.add = (a,b)=>{
   return a+b;
}

//main.js
const textOne = require("./textOne");
const textTwo = require("./textTwo");

one.info("hello world，"+two.add(52,25));

根目录下新建webpack.config.js文件，然后配置如下：

const path = require("path");

// 打包规则
module.exports = {
  //入口函数
  entry:"./src/main.js",
  //编译成功后 文件输出到哪
  output:{
    path:path.resolve(__dirname,"./dist"),
    filename:"bundle.js"
  }
}

在根目录运行：webpack，即可开始打包

可以在dist目录下新建html文件，然后引用bundle.js，查看效果

Webpack打包css文件

默认webpack打包的时候只会处理JS之间的依赖关系，所以需要配置 webpack 使用 css-loader 跟style-loader 去处理css文件

css-loader 可以识别这个css模块，通过特定的语法规则进行转换内容最后导出，但由于导出的是数组形式，在页面中无法正常使用，所以又需要style-loader二次处理

使用案例

cmd进入根目录终端，运行：npm install --save-dev style-loader css-loader，安装依赖

修改webpack.config.js文件内容：

const path = require("path");

// 打包规则
module.exports = {
  //入口函数
  entry:"./src/main.js",
 //编译成功后 文件输出到哪
 output:{
   path:path.resolve(__dirname,"./dist"),
   filename:"bundle.js"
},
 module:{
  rules:[{
   test:/\.css$/, //把项目中所有的.css结尾的文件进行打包
   use:["style-loader","css-loader"]
  }]
 }
}

在src目录中定义一个css文件，并添加代码：

body{
 background:red;
}

在main.js中引入

require("./style.css")

打开终端，运行：webpack，进行打包，然后打开html查看效果

通过自定义脚本的方式执行webpack

在package.json中配置命令

然后运行npm run dev，进行打包

Webpack打包html文件

首先需要安装html-webpack-plugin插件

npm install --save-dev html-webpack-plugin

新建index.html文件

<!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>你好</h1>
</body>
</html>

接着在webpack.config.js文件中进行如下配置

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

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My HTML5', // HTML标题
      template: './index.html', // 模板文件
    }),
  ],
};

然后运行webpack进行打包

Webpack打包图片资源

ps：file-loader 和 url-loader都可以进行图片打包

首先安装file-loader

npm install file-loader --save-dev

然后在 webpack.config.js 文件中进行如下配置：

module.exports = {
  // 入口文件
  entry: './index.js',
  output: {
    // 打包输出文件夹
    path: path.resolve(__dirname, 'dist'),
    // 打包输出文件名称
    filename: 'bundle.js'
  },
  module: {
    rules: [
      // 配置 file-loader 处理图片
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]', // 输出文件名和后缀
              outputPath: 'img/' // 输出路径
            }
          }
        ]
      }
    ]
  }
}

然后新建img文件夹，放一张图片，再到mian.js中使用：

import imgSrc from './img/72.png';

const img = new Image();
img.src = imgSrc;
document.body.appendChild(img);

然后运行webpack进行打包

在打包好的dist目录中新建index.html，引入bundle.js，然后打开html就可以看到图片了

Webpack移动静态资源，不进行打包

安装插件：npm i copy-webpack-plugin -D

根目录新建一个static文件夹，在文件夹下再建一个ac.js，然后填充内容：

const a = 1
const b = 2

对webpack.js进行配置：

const path = require("path");
const copyWebpackPlugin = require('copy-webpack-plugin');

// 打包规则
module.exports = {
    mode: 'development',
    //入口函数
    entry: "./test.js",
    //编译成功后 文件输出到哪
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    plugins: [
        new copyWebpackPlugin({
            patterns: [  //patterns 选项用于指定要复制的文件和目录的源路径和目标路径
                { from: "static", to: "staticA" }
            ]
        })
    ]
}

再运行webpack打包之后查看，static文件夹下的内容原封不动的复制到了dist目录下：

clean-webpack-plugin

在每次构建之前自动清除输出目录中的所有文件，以便保持输出目录的干净整洁

const path = require("path");
const cleanWebpackPlugin = require('clean-webpack-plugin')

// 打包规则
module.exports = {
    mode: 'development',
    //入口函数
    entry: "./test.js",
    //编译成功后 文件输出到哪
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    plugins: [
        new cleanWebpackPlugin()
    ]
}

Babel

ES6的很多语法在浏览器甚至node环境中无法执行，babel就是一个广泛使用的转码器，可以将ES6代码转化成ES5代码

定义一个文件夹，cmd进入到其中，运行npm install -g babel-cli安装，然后可以通过babel --version查看是否安装成功

npm init -y初始化一个package.json文件

新建一个src文件夹，src中创建text.js，然后编辑如下ES6代码

//es6
let name = 'ac'
const title = 'ShenZheng'
let arr = [1,3,5,5,1,23,3]
let newArr = arr.map(a=>a*2)
console.log(newArr )

通过node src/text.js运行查看是否成功

根目录创建.babelrc文件，然后记事本打开配置如下：

{
    "presets":["es2015"], //转译的版本
    "plugins":[]
}

cdm运行npm install --save-dev babel-preset-es2015，安装转换器

再执行babel src -d dist，就会生成转译后的js代码

对比两个text.js文件中的代码

//es6
let name = 'ac'
const title = 'ShenZheng'
let arr = [1,3,5,5,1,23,3]
let newArr = arr.map(a=>a*2)
console.log(newArr )


//转译后的es5代码
'use strict';

var name = 'ac';
var title = 'ShenZheng';
var arr = [1, 3, 5, 5, 1, 23, 3];
var newArr = arr.map(function (a) {
  return a * 2;
});
console.log(newArr);