webpack学习

小猿L

已于 2024-06-05 23:21:20 修改

阅读量999

点赞数 23

分类专栏： webpack打包文章标签： webpack

于 2024-05-31 18:51:55 首次发布

本文链接：https://blog.youkuaiyun.com/enhenglhm/article/details/139359333

版权

webpack学习笔记

参考文档：
Webpack官网中文文档
学习视频：
Webpack原理与实践

温故webpack打包知识,忘记了就回头看看~ 根据学习视频学习整理，不为一一对应笔记，主要是根据对学习视频知识的梳理~
PS:上学习视频是基于webpack4的，我这边运行时基于webpack5的，不对的地方已经按照官方文档进行定义配置

初始化项目

环境要求：node+npm+webpack

初始化 npm 项目

npm init -y

安装 webpack 和 webpack-cli：

npm install --save-dev webpack webpack-cli

创建项目

建立webpack.config.js文件
新建src文件夹，新建打包入口文件main.js
webpack.config.js

const path = require('path');
module.exports = {
   
    //定义入口文件
    entry: './src/main.js',
  // 定义输出文件名
  output:{
   
        //定义输出名称
        filename:'bundle.js',
        //定义输出路径
       path: path.join(__dirname, "/dist"),
  }
}

main.js

alert('Hello world!')

定义打包命令package.json中script

运行npm run build 则打包文件,默认根据webpack.config.js配置打包

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

在根目录建立index.html文件，通过script标签引入打包的文件(后面通过插件htlm-webpack-plugin自动生成，则删除此文件，直接自动打包到dist文件夹中，并会自动引入打包.js文件)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Plugin Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="dist/bundle.js"></script>
    </head>
  <body>
  </body>
</html>

安装server运行静态服务器

运行serve则打开当前目录，若有index.html默认运行index.html文件

npm install -g serve

运行

当前开始时运行的自定义的index.html看效果，

serve .

后续运行dist文件夹的自动生成的index.html看效果

serve dist

模块化标准规范

浏览器：ES Module (主流的打包方案)
Nodejs: Commonjs(内置的环境系统)

Entry（入口）：

Webpack 的打包过程从入口文件开始。入口文件可以是一个或多个，指定了应用程序的起点。

// webpack.config.js
module.exports = {
   
entry: './src/index.js'
};

Output（输出）：

配置打包后的文件输出位置和文件名。

// webpack.config.js
module.exports = {
   
entry: './src/index.js',
output: {
   
filename: 'bundle.js',
path: __dirname + '/dist'
}
};

Loaders（加载器）：

Loaders 让 Webpack 能够处理非 JavaScript 文件!!! 如 CSS、图片、字体等。通过配置 loaders，Webpack 可以将这些文件转换为可以被应用程序使用的模块。
具体每个loader作用以及更多loader查看官网，在这里配置最常见的loader

常见loader如下：

style-loader & css-loader
file-loader & url-loader
html-loader
babel-loader
自制loader
…

安装依赖

npm i style-loader css-loader file-loader url-loader html-loader babel-loader

配置应用

const webpack = require('webpack');
const path = require("path");
module.exports = {
   
  mode: "none",
  entry: "./src/main.js",
  output: {
   
    filename: "[name]-[chunkhash:8]-bundle.js",
    path: path.join(__dirname, "/dist"),
  },
  module: {
   
    rules: [
      {
   
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
   
          loader: "babel-loader",
          options: {
   
            //将ES Modules转换为CommonJS
            presets: [
              ['@babel/preset-env', {
   
                //默认是auto自动，写了commonjs是强制转换为commonjs,此时usedExports无法生效，即tree shaking无法生效
                modules: 'commonjs'
              }]
            ],
          }
        }
      },
      {
   
        test: /\.html$/,
        use: 'html-loader',
      },
      {
   
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader']
      },
      {
   
        test: /\.png$/,
        use: {
   
          loader: "url-loader",
          options: {
   
            name: '[name].[hash:8].[ext]',
            outputPath: 'images/',
            publicPath: 'images/',
            limit: 10 * 1024,
          }
        }
      }
    ]
  }
}

自制loader详解

自制markdown-loader为了解析引入.md文件

安装markdown-it(webpack5用这个解析.md文件）

npm i markdown-it

新建markdown-loader.js

const markdownIt = require('markdown-it')();

module.exports = function markdownLoader(source) {
   
    const html = markdownIt.render(source);
    return `module.exports = ${
     JSON.stringify(html)}`;
};

配置使用


const webpack = require('webpack');
const path = require("path");
module.exports = {
   
  mode: "none",
  entry: "./src/main.js",
  output: {
   
    filename: "[name]-[chunkhash:8]-bundle.js",
    path: path.join(__dirname, "/dist"),
  },
  module: {
   
    rules: [
      {
   
        test: /\.md$/,
        use: './markdown-loader'
      }
    ]
  }
}

style-loader 和 css-loader

这两个 Loaders 通常一起使用，用于处理 CSS 文件并将其引入到 JavaScript 模块中。

css-loader：

解析 CSS 文件中的 @import 和 url() 语法，并将 CSS 转换为 JavaScript 模块。
允许你在 JavaScript 文件中通过 import 或 require 引入 CSS 文件。

style-loader：

将 CSS 以

示例配置：

module.exports = {
   
  module: {
   
    rules: [
      {
   
        test: /\.css$/

最低0.47元/天解锁文章