webpack的认识加总结

最新推荐文章于 2022-03-24 21:38:55 发布

乘风(^v^)

最新推荐文章于 2022-03-24 21:38:55 发布

阅读量165

点赞数

分类专栏：前端文章标签： webpack

本文链接：https://blog.csdn.net/weixin_45205937/article/details/102717862

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、什么是webpack

本篇适用于webpack4+版本，低版本的部分会出现问题！！！

简单的说，webpack是一个JavaScript的打包器，讲各个模块打包成资源文件，然后按需加载或者并行这些文件。
在这里插入图片描述

2、webpack核心概念

在开始学习 webpack 之前，你需要了解 webpack 的四个核心概念：

入口（entry）
出口（output）
loader
插件（plugins）

2.1、入口（entry）

入口指示webpack应该适用哪个模块，来开始构建其内部依赖。
我们可以在webpack中配置entry属性，来设置一个或多个入口七点。

const config = {
// 单个
  entry: 'path/to/your/entry/index.js'

// 多个
  entry: {
  	one: 'path/to/your/entry/one.js',
  	two: 'path/to/your/entry/two.js'
  }
}
module.exports = config

2.2、出口(output)

设置output是为了告诉webpack要在哪里输出其创建的bundle，并且可以对bundle命名。

const path = require('path')
 
const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，
  output: {
  // 这里用[name]可以动态设置文件的名字（不管有几个入口文件）
    filename: '[name].bundle.js',
    // 文件名
    path: path.join(__dirname, './dist')
    // 创建文件后，文件的地址
  }
}
// 写入到硬盘：./dist/index.bundle.js
module.exports = config

2.3 loader

由于 webpack 只认识 JavaScript 代码，因此就需要借助其他方法来处理那些非 JavaScript 文件；而loader可以将所有类型的文件处理成webpack能够识别的有效模块，然后在对其进行处理。

loader有两个重要属性：
1、test：用于标识出应该被对应的loader进行转换的某个或某些文件，通常是一个正则表达式：
2、use：表示进行转换时，应该使用哪个loader。

const path = require('path')
 
const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    loaders: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      }
    ]
  }
}
module.exports = config

2.4 插件(plugins)

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
使用插件的方法如下面代码所示：

const path = require('path')

// 1、npm i html-webpack-plugin --save-dev 来安装插件
// 2、实例化插件对象
const HtmlWebpackPlugin = require('html-webpack-plugin') 
 
const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    loaders: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      }
    ]
  },
  // 新增plugins数组，写入以下规则代码
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack demo',
      template: path.join(__dirname, './index.html')
    })
  ]
}
 
module.exports = config

HtmlWebpackPlugin 将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。

3、webpack 小例子

创建一个新目录并进入该目录，
通过以下命令初始化 package.json ：

npm init -y

引入 webpack4：

npm i webpack --save-dev

因为 webpack 4+ 版本将 webpack 和 webpack-cli 分开了，所以我们还需安装 webpack-cli 才能使用 webpack 命令。

npm i webpack-cli --save-dev

现在打开 package.json 并添加一个 build (构建) 脚本：
在 package 文件下的 scripts 下面添加

"scripts": {
  "build": "webpack"
}

尝试运行，看看会发生什么：

npm run build

是不是发现终端报错！
这是因为 webpack4 找不到默认的入口文件和出口文件！
下面在项目根目录创建 src 文件夹和webpack.config.js，在 src 下面创建 main.js
main.js 代码:

console.log(`I'm a silly entry point`);

webpack.config.js 代码：


const path = require('path')
 
let config = {
  mode: 'none',
  entry: {
    main: path.join(__dirname, './src/main.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  }
}
 
module.exports = config

webpack.config.js是webpack默认的文件，当代码找不到入口文件时，会默认来这个文件中寻到。

在webpack4中，我们需要设置 mode 属性，用来决定当前是development还是production环境，webpack会根据此值来进行一些默认操作。现在我们设置为‘none’，来避免默认操作。

development:开发模式，dist文件下面的JS没有被压缩
production：生产模式，dist文件下面的JS被压缩了；它可以开箱即用地进行各种优化。包括压缩，作用域提升，tree-shaking 等。

接下来打开 package.json 文件，来编写一条命令执行webpack的打包。在 script 中修改build 命令：

"build": "webpack --mode production"

然后执行命令：npm run build，就可以看到根目录下多了一个dist文件，并且有一个bundle.js文件，这就是webpack为我们打包出来的静态资源。
为了演示打包好的bundle.js文件，我们在src下面创建一个index.html，并引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    // 因为我的JS文件名为main，所以引入main.js
    <script src="../dist/main.js"></script>
</head>
<body>
    
</body>
</html>

webpack 4：用 Babel 7 转译 Javascript ES6

现代 Javascript 主要是用 ES6 编写的。
但并非每个浏览器都知道如何处理 ES6 。我们需要某种转换。

Webpack 不知道如何进行转换但是有 loader(加载器) ：将它们视为转译器。
babel-loader 是一个 webpack 的 loader(加载器)，用于将 ES6 及以上版本转译至 ES5 。

安装依赖：babel-core、babel-loader、babel-preset-env 用于将 Javascript ES6 代码编译为 ES5。

npm i babel-core babel-loader babel-preset-env --save-dev

接下来，通过在项目文件夹中创建名为 .babelrc 的新文件来配置 Babel ：
.babelrc 代码:

{
    "presets": [
        "env"
    ]
}

配置babel-loader ：在 webpack.config.js 文件中的module.exports 写入代码

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }

然后 npm run build。

将 CSS 提取到一个文件中

安装 mini-css-extract-plugin 插件

npm i mini-css-extract-plugin css-loader --save-dev

注意：确保将 webpack 更新到 4.2.0 版。否则 mini-css-extract-plugin 将无效！

创建一个CSS文件随便写入点代码

body {
    background-color: bisque;
}

配置插件和loader加载器：
webpack.config.js 代码：

const HtmlWebPackPlugin = require("html-webpack-plugin");
//1、头部添加
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      //2、规则添加
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    // 3、插件添加
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

然后去src文件下的JS中导入CSS

import style from "./main.css";

然后再次运行构建npm run build！
查看dist文件下，有你生成的CSS！

热更新 webpack dev server

每当你对代码进行更改时，运行 npm run dev ？远非我们的理想。
配置好的 webpack dev server 将在浏览器中启动您的应用程序。
每次更改文件时，它都会自动刷新浏览器的窗口。
安装依赖：

npm i webpack-dev-server --save-dev

package.json代码：新加strat命令

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}

然后npm run start！
修改样式 ~~你会发现已经自动刷新了！

乘风(^v^)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的认识加总结

1、什么是webpack本篇适用于webpack4+版本，低版本的部分会出现问题！！！简单的说，webpack是一个JavaScript的打包器，讲各个模块打包成资源文件，然后按需加载或者并行这些文件。2、webpack核心概念在开始学习 webpack 之前，你需要了解 webpack 的四个核心概念：入口（entry）出口（output）loader插件（plugins）...
复制链接

扫一扫