项目中使用webpack基本的配置

最新推荐文章于 2024-06-24 20:34:24 发布
最新推荐文章于 2024-06-24 20:34:24 发布
阅读量2.3k 收藏 6
点赞数 2
分类专栏： webpack 前端学习 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41399785/article/details/79083115
版权

什么是 webpack

webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用

使用 webpack 前的准备

  1. npm init ：创建一个 package.json 文件。它是标准的 npm 说明文件，包括当前项目的依赖模块、自定义的脚本任务等

  2. cnpm install webpack --save-dev ：安装 webpack

  3. 文件目录的构建方面：一般由两个目录构成：app（存放原始数据和 JS 模块），public（存放供浏览器读取的文件，即 webpack 打包生成的文件，和 html 源代码）

  4. 创建根目录下 webpack.config.js 文件，这是 webpack 的配置文件，基本的配置如下：

module.exports = {
    entry:  __dirname + "/app/main.js", // 已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public", // 打包后的文件存放的地方
        filename: "bundle.js" // 打包后输出文件的文件名
    }
};

‘__dirname’是 node.js 中的全局变量，它指向当前执行脚本所在的目录

package.json 方面的配置：（配置好后，直接可以在命令行：npm start 即可进行打包编译，需要注意的是，除了 "start" 之外，所有的自定义命令都需要通过 npm run 命令名称 的形式进行）

"scripts": {
    "start": "webpack"
}

webpack 提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，更容易调试。

module.exports = {
    // 小到中型的项目中，eval-source-map 是一个很好的选择
    devtool: 'eval-source-map', // 注意：只应该在开发阶段使用它
    entry:  __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
};

正式书写代码时，通过 module.exports 的方式进行模块的导出，通过 require 的方式进行模块的导入

同时建立多个入口文件：

module.exports = {
    // 可以同时定义多个入口文件
    entry: {
        'index':  __dirname + '/app/main.js',
        'indexT': __dirname + '/app/main2.js'
    },
    output: {
        path: __dirname + '/build',
        filename: '[name]-[hash].js' // 定义多个出口文件时的命名
    },
}

使用 webpack 构建本地服务器

cnpm install webpack-dev-server --save-dev ：安装 webpack-dev-server

在 webpack.config.js 中进行配置

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public", // 本地服务器所加载的页面所在的目录
    historyApiFallback: true, // 不跳转
    inline: true // 实时刷新
  } 
};

之后，在 package.json 中的 scripts 对象添加命令，方便开启本地服务器：

"server": "webpack-dev-server --open"

此时，通过在终端输入：npm run server 就可以本地的 8080 端口查看结果

Loaders

通过使用不同的 loader，webpack 有能力调用外部的脚本或者工具，实现对不同格式的文件的处理

如分析转换 scss 为 css，把 ES6，ES7 转为现代浏览器兼容的 JS 文件等等

Loaders 需要单独安装并且需要在 webpack.config.js 中的 modules 关键字下进行配置，配置包括以下方面：
1. test ：一个用以匹配 loaders 所处理文件的扩展的正则表达式（必须！）
2. loader ：loader 的名称（必须！）
3. include / exclude ：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
4. query ：为 loaders 提供额外的设置选项（可选）

Babel

Babel ：其实是一个编译 JavaScript 的平台，它可以编译 ES6，ES7，基于 JavaScript 的扩展语言：React 的 JSX，TypeScript 等等

Babel 是几个模块化的包，其核心功能位于称为 babel-core 的 npm 包中，对于每个我们需要的功能或扩展，都需要单独安装响应的包，如：
- 解析 ES6 的 babel-env-preset 包
- 解析 JSX 的 babel-preset-react 包

安装他们：cnpm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev
cnpm install react react-dom --save

在 webpack.config.js 中配置 Babel：

module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "env", "react"
                    ]
                }
            },
            exclude: /node_modules/
        }
    ]
}

配置完成后，就可以使用 ES6 以及 JSX 语法了

关于 Babel 的配置

babel 具有非常多的配置选项，可以将它的配置单独放在 .babelrc 的配置文件中（webpack 会自动调用 .babelrc 里的 babel 配置选项）

module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
                // 以下放到 .babelrc 中
                // options: {
                //     presets: [
                //         "env", "react"
                //     ]
                // }
            },
            exclude: /node_modules/
        }
    ]
}

在 .babelrc 中：

{
  "presets": ["react", "env"]
}

一切皆模块

webpack 的特殊优点是，它把所有的文件都当做模块处理，JavaScript、CSS、fonts、图片等等，通过合适的 loader 都可以被处理

1. CSS 的处理

  1. css-loader ：能够使用类似 @import 和 url(...) 的方法实现 require() 的功能
  2. style-load ：将所有计算后的样式加入到页面中

两者组合在一起能够把样式表嵌入到 webpack 打包后的 JS 文件中

安装他们：cnpm install style-loader css-loader --save-dev

在 webpack.config.js 中配置使用：

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

注意这里对同一个文件引入多个 loader 的方法

之后，只需将对应的 CSS 文件，通过 require 导入到入口文件 main.js 中就可以使用共同打包

2. CSS module

CSS modules 意在把 JS 的模块化思想带入 CSS 中，通过 CSS 模块，所有的类名，动画名默认都只作用于当前模块，这样可以有效的避免全局污染，配置如下：（在 webpack.config.js 中进行配置）

{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader"
        }, {
            loader: "css-loader",
            options: {
                modules: true, // 指定启用css modules
                localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
            }
        }
    ]
}
// 使用cssModule添加类名的方法
<div className={styles.root}>

3. CSS 预处理器

对于 Sass、Less 之类的预处理器可以在 webpack 使用相关的 loaders 进行配置：
1. Less Loader
2. Sass Loader
3. Stylus Loader

不过其实也存在一个 CSS 的处理平台 -PostCSS，它的其中一个功能是为 CSS 代码自动添加使用不同浏览器的 CSS 前缀

安装他们：cnpm install postcss-loader autoprefixer --save-dev

其中，autoprefixer 是自动添加前缀的插件。之后再 webpack 配置文件中添加 postcss-loader：

{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader"
        }, {
            loader: "css-loader",
            options: {
                modules: true
            }
        }, {
           loader: "postcss-loader" // 添加 postcss-loader
       }
    ]
}

4. 对图片的打包

图片需要使用 url-loader 来加载，安装：cnpm install url-loader --save-dev

使用：

{
    test: /(\.png|\.jpg)$/,
    // 小于8kb的图片不会被处理
    use: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
}

插件（Plugins）

插件是用来扩展 webpack 功能的，他们会在整个构建过程中生效，执行相关的任务

Loaders 和 Plugins 的区别：
- loaders 是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个
- 插件并不直接操作单个文件，它直接对整个构建过程起作用

1. 使用插件的方法

使用哪个插件，就通过 npm 来进行安装，之后再 webpack.confign.js 中的 plugins 关键字部分添加该插件的一个实例

2. 常用的插件之：HtmlWebpackPlugin

该插件的作用：依据一个简单的 html 模板，生成一个自动引用打包后的 JS 文件的新的 index.html，这在每次生成的 JS 文件名称中带有 hash 值时非常有用（因为每次名称不同）

安装他们：cnpm install html-webpack-plugin --save-dev

之后，需要对项目进行一些更改：

  1. 删除 public 文件夹，利用此插件 html 文件会自动生成，前面操作的 JS 文件也会自动关联到生成的新 html 文件中

  2. 在 app 目录下，创建的 html 模板以这种格式创建：名称.tmpl.html，插件会根据这个模板生成最终的 html 页面，并会进行自动的依赖

  3. 更新 webpack 的配置文件，新建一个 build 文件夹用来存放生成的文件

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

module.exports = {
    entry: __dirname + '/app/main.js', // 入口文件
    output: {
        path: __dirname + '/build', // 出口文件所在文件夹
        filename: 'bundle.js' // 打包后的文件
    },
    // 启动服务器：webpack-dev-server --open
    devServer: {
        contentBase: './public',//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    // 关于 Babel 的配置，可以单独在 .babelrc 中进行配置
    module: {
        rules: [
            // Babel 的一些简单配置
            // 下载的依赖包：babel-core babel-loader babel-preset-env babel-preset-react react react-dom
            // 配置好后就可以使用 react 语法了
            {
                test: /(\.jsx|\.js)$/, // 处理的文件
                use: {
                    loader: 'babel-loader', // 使用的 loader
                    // 在 .babelrc 中进行配置
                    // options: {
                    //     presets: [
                    //         'env', 'react'
                    //     ]
                    // }
                },
                // 不需要处理的文件夹
                exclude: /node_modules/
            },
            // 安装 postcss-loader 和 autoprefixer
            // PostCSS 代码自动添加使用不同浏览器的 CSS 前缀
            // autoprefixer 自动添加前缀的插件
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    }, {
                        loader: 'css-loader',
                        // css模块：所有的类名，动画名都只作用于当前模块，避免全局污染
                        options: {
                            modules: true, // 指定启用css modules
                            // 指定css的类名格式
                            // localIdentName: '[name]__[local]--[hash:base64:5]'
                        }
                    }, {
                        // 需要新建 postcss.config.js 文件进行其他配置
                        loader: 'postcss-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        // 添加版权的插件
        new webpack.BannerPlugin('版权所有，翻版必究'),
        //new 一个这个插件的实例，并传入相关的参数
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html'
        })
    ]
};

之后，正常的在终端执行：npm start 就可以进行新一轮的打包编译了

3. 常用的插件之：Hot Module Replacement

Hot Module Replacement（HMR）插件允许在修改组件代码后，自动刷新实时预览修改后的效果

它是 webpack 里的一个插件

如何配置：
1. 在 webpack.config.js 中添加 HMR 插件
2. 在 webpack Dev Server 中添加 “hot” 参数
3. 配置结束后，在 JS 模块中执行一个 webpack 提供的 API 才能实现热加载

思路：
1. Babel 和 webpack 是两个独立的工具
2. 两者可以一起工作的同时，都可以通过插件扩展功能
3. HMR 是一个 webpack 插件，想让他工作，还需要对模块进行额外的配置
4. Babel 中有一个 react-transform-hmr 插件，可以让 HMR 正常工作，而且不产生对模块的额外配置影响

在 webpack.config.js 中的配置：

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

module.exports = {
    entry: __dirname + '/app/main.js', // 入口文件
    output: {
        path: __dirname + '/build', // 出口文件所在文件夹
        filename: 'bundle.js' // 打包后的文件
    },
    // 启动服务器：webpack-dev-server --open
    devServer: {
        contentBase: './public', // 本地服务器所加载的页面所在的目录
        historyApiFallback: true, // 不跳转
        inline: true, // 实时刷新
        hot: true // 配合 HMR 实现热加载
    },
    plugins: [
        // 热加载插件，还需要在 .babelrc 中的 "env" 进行配置
        new webpack.HotModuleReplacementPlugin()
    ]
};

安装： cnpm install babel-plugin-react-transform react-transform-hmr --save-dev

在 Babel 中的配置：

{
    "presets": ["react", "env"],
    "env": {
        "development": {
            "plugins": [["react-transform", {
                "transforms": [{
                    "transform": "react-transform-hmr",

                    "imports": ["react"],

                    "locals": ["module"] }]
            }]]
        }
    }
}

配置完成之后，就可以在使用 React 时，进行热加载模块了

产品阶段的构建

产品阶段：主要是对打包的文件进行额外处理，如压缩、优化、缓存，分离 CSS 和 JS 等

创建一个 webapck.production.config.js 文件：

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

module.exports = {
    entry: __dirname + '/app/main.js', //已多次提及的唯一入口文件
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    devtool: 'null', //注意修改了这里，这能大大压缩我们的打包代码
    devServer: {
        contentBase: './public', //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [{
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                }, {
                    loader: 'postcss-loader'
                }],
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin('朋友们注意版权哦~~'),
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html' //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin() //热加载插件
    ],
};

package.json 文件也需要配置：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open",
    "build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
  },

优化插件

webpack 提供了一些优化插件，产品发布阶段所需的功能：

  1. OccurenceOrderPlugin ：为组件分配 ID，通过分析和优先考虑使用最多的模块，并未他们分配最小 ID
  2. UglifyJsPlugin ：压缩 JS 代码
  3. ExtractTextPlugin ：分离 CSS 和 JS 文件

上面的插件中，OccurenceOrderPlugin 和 UglifyJsPlugin 是内置插件，需要下载的只有：ExtractTextPlugin：

cnpm install extract-text-webpack-plugin --save-dev

之后再 webpack.production.config.js 引用他们：

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

module.exports = {
    entry: __dirname + '/app/main.js', //已多次提及的唯一入口文件
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    devtool: 'null', //注意修改了这里，这能大大压缩我们的打包代码
    devServer: {
        contentBase: './public', //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            // 分离 CSS，成为一个单独的文件
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    'postcss-loader'
                ]
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin('朋友们注意版权哦~~'),
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html', //new 一个这个插件的实例，并传入相关的参数
             // 压缩HTML文件
            minify: {
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true // 删除空白符与换行符
            }
        }),
        // 为组件分配 ID，通过这个插件可以优先考虑使用最多的模块，分配给他们最小的 ID
        new webpack.optimize.OccurrenceOrderPlugin(),
        // 压缩 JS 文件
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            except: ['$super', '$', 'exports', 'require']    //排除关键字
        }),
        // 分离 CSS 和 JS 文件
        new ExtractTextPlugin('style.css')
    ],
};

之后再终端执行：npm run build 就可以进行产品阶段的打包了

缓存

使用这种方式：

output: {
    path: __dirname + "/build",
    filename: "bundle-[hash].js"  // 添加 hash 值
},

添加 hash 之后，导致改变文件内容后的重新打包，文件名不同而文件越来越多，可以使用：clean-webpack-plugin 来进行清理

安装他们：cnpm install clean-webpack-plugin --save-dev

在配置文件中进行响应的配置即可：

const CleanWebpackPlugin = require("clean-webpack-plugin");

    plugins: [
        ...// 这里是之前配置的其它各种插件
        new CleanWebpackPlugin('build/*.*', {
            root: __dirname,
            verbose: true,
            dry: false
        })
    ]
神圣光
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack基本配置
03-08
在“webpack基本配置”中，我们通常会涉及以下几个关键部分： 1. **入口(entry)**：定义应用程序的起点，Webpack 从这个入口开始递归解析依赖并构建模块图。可以是一个字符串，表示单个入口，也可以是一个对象，...
webpack使用详解
ScottePerk的博客
11-18 2417
官方定义：从本质上来说，webpack是一个现代的JavaScript的静态模块打包工具。webpack是前端工程化的一个解决方案。提供了前端模块化功能支持，模块混淆，代码压缩，处理浏览器JS兼容性，性能优化等强大功能。
webpack配置module详解
~
04-10 1977
module: { rules: [ // loader配置 { test: '/\.css$/', // 多个loader用use use: ['style-loader', 'css-loader'] }, { test: '/\.js$/', // 单个loader用loader loa.
webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用
最新发布
2401_85124812的博客
06-24 1023
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
【webpack】webpack的基本使用
weixin_43655896的博客
02-13 7247
整理了一些webpack4基本的使用
想聊聊 webpack, 如何来配置 webpack 以及基本使用
web00_11的博客
08-15 807
webpack 的基本使用 什么是 webpack 概念：webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。 在项目中安装 webpack 在终端运行如下的命令，安装 webpack 相关的两个
webpack基本使用
凉茶铺的博客
01-09 1987
介绍了webpack的下载和安装，和如何打包css与less文件，最后介绍了postcss-loader的作用和用法
webpack-使用配置文件.rar
04-11
在最基本的配置中，这通常是一个或多个JavaScript文件，Webpack从这些文件开始，找出所有依赖，并构建出依赖图。 2. **output**：输出配置，定义Webpack打包后的文件输出位置和文件名，包括路径和生成的bundle...
Vue+webpack项目基础配置教程
08-28
Vue+webpack项目基础配置教程 本教程主要介绍了Vue+webpack项目基础配置教程，旨在帮助开发者快速搭建Vue+webpack项目的基础配置环境。下面是详细的知识点总结： 一、开发环境配置 开发环境是指使用的IDE、文本...
vue项目中的webpack-dev-sever配置方法
08-28
以上就是Vue项目中`webpack-dev-server` 的基本配置方法。理解并掌握这些配置，可以让你在开发过程中更加得心应手，提高协同开发的效率。同时，也要注意网络安全，不要在生产环境中开放不必要的端口。
webpack基本配置案例
08-10
在这个"webpack基本配置案例"中，我们将深入理解Webpack的核心概念和基础配置。 首先，Webpack 的核心思想是"一切都是模块"，它通过加载器（Loader）将不同类型的文件转换为JavaScript模块，然后通过插件（Plugin）...
webpack配置完全指南
Web面试那些事儿的博客
11-28 1011
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entryoutputmoderesolvemodulepluginsource map等，本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期运行时提供有用的错误消息。
Webpack配置全解析（优化篇）
Cool的博客
08-10 3296
在上一篇文章Webpack配置全解析介绍了Webpack中loader和plugins的一些基本用法，当loader和plugins使用较多后项目也会越来越耗时，因此这次我们继续学习如何优化webpack的配置来让我们的项目运行的更快耗时更短。 　　本文将从缩小文件搜索范围、减少打包文件、缓存和多进程四个方面来了解Webpack的优化配置。 缩小文件搜索范围 　　Webpack会从Entry入口出发，解析文件中的导入模块语句，再递归解析；每次遇到导入语法时会做两件事情： 查找导入模块的位置，比如re
webpack配置超全指南
metaboss的博客
05-14 1185
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entryoutputmoderesolvemodulepluginsource map等，本文就来重点分析下这些部分。
webpack基本的配置
读心悦
07-06 3162
现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
webpack配置（超全loader和插件）
weixin_42574100的博客
04-13 1826
webpack webpack中的loader webpack 插件
一看就会系列——webpack 中的Module 配置
简桐
03-12 5152
首先我们从字面意思来解读以下 `Module` 就是模块，从宏观角度说，在 `Webpack` 中一切都是模块，相信都听过这句话，所以那么就很容易理解了， `Module` 就是文件呀！
webpack配置
热门推荐
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
layui项目中使用webpack
05-20
在Layui项目中使用Webpack需要进行以下步骤： 1. 安装Webpack和相关的Loader和Plugin ```bash npm install webpack webpack-cli --save-dev ...以上就是在Layui项目中使用Webpack的基本步骤，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值