从零开始配置webpack(基于webpack 4 和 babel 7版本)

最新推荐文章于 2023-05-23 18:14:53 发布
最新推荐文章于 2023-05-23 18:14:53 发布
阅读量217 收藏
点赞数
企鹅我认为v
本文链接：https://blog.csdn.net/cpongo11/article/details/98748703
版权
本文详细介绍了如何从零开始配置webpack，包括核心概念、配置流程和实战步骤，如设置入口、输出、Loader和Plugin。内容涵盖配置支持CSS、图片、LESS/SASS、ES6/ES7/JSX语法，以及代码压缩和优化。最后提供了完整的webpack.config.js和package.json文件示例。
摘要由CSDN通过智能技术生成

webpack 核心概念:

  • Entry: 入口

  • Module:模块，webpack中一切皆是模块

  • Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割

  • Loader:模块转换器，用于把模块原内容按照需求转换成新内容

  • Plugin:扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情

  • Output: 输出结果

webpack流程:

webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk。最好Webpack会把所有Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。

下面我们开始从零开始配置一个支持打包图片,CSS,LESS,SASS,支持ES6/ES7和JSX语法，并对代码进行压缩的webpack配置.

1. 最简webpack配置

首先初始化npm和安装webpack的依赖:

npm init -y	
npm install --save-dev webpack webpack-cli

配置 webpack.config.js 文件如下:

const path = require('path');	
module.exports = {	
    entry: path.resolve(__dirname, 'src/index.js'),	
    output: {	
        path: path.resolve(__dirname, 'dist'),	
        filename: 'bundle.js',	
        publicPath: '/'	
    }	
}

说明: publicPath 上线时配置的是cdn的地址。

使用命令进行打包:

webpack --mode production

也可以将其配置到 package.json 中的 scripts 字段.

入口文件为 src/index.js, 打包输出到 dist/bundle.js.

2. 使用模板 html

html-webpack-plugin 可以指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js.

安装依赖:

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

在 webpack.config.js 增加 plugins 配置:

const HtmlWebpackPlugin = require('html-webpack-plugin');	
module.exports = {	
    //...other code	
    plugins: [	
        new HtmlWebpackPlugin({	
            template: path.resolve(__dirname, 'src/index.html')	
        })	
    ]	
}

HtmlWebpackPlugin 还有一些其它的参数,如title(html的title),minify(是否要压缩),filename(dist中生成的html的文件名)等

3. 配置 webpack-dev-server

webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力

安装依赖:

npm install --save-dev webpack-dev-server

在 webpack.config.js 增加 devServer 配置:

const path = require('path');	
const HtmlWebpackPlugin = require('html-webpack-plugin');	
module.exports = {	
    //...other code	
    devServer: {	
        contentBase: './dist',	
        port: '8080',	
        host: 'localhost'	
    }	
}

在 package.json 的 scripts 字段中增加:

webpack-dev-server --mode development

之后，我们就可以通过 npm run dev , 来启动服务。

更多 webpack-dev-server 的知识，请访问: https://webpack.js.org/configuration/dev-server/

4. 支持加载css文件

通过使用不同的 style-loader 和 css-loader, 可以将 css 文件转换成JS文件类型。

安装依赖:

npm install --save-dev style-loader css-loader

在 webpack.config.js 中增加 loader 的配置。

module.exports = {	
    //other code	
    module: {	
        rules: [	
            {	
                test: /\.css/,	
                use: ['style-loader', 'css-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            }	
        ]	
    }	
}

loader 可以配置以下参数:

  • test: 匹配处理文件的扩展名的正则表达式

  • use: loader名称

  • include/exclude: 手动指定必须处理的文件夹或屏蔽不需要处理的文件夹

  • query: 为loader提供额外的设置选项

如果需要给loader传参，那么可以使用use+loader的方式,如:

module.exports = {	
    //other code	
    module: {	
        rules: [	
            {	
            use: [{	
                        loader: 'style-loader',	
                        options: {	
                            insertAt: 'top'	
                        }	
                    },	
                    'css-loader'	
                ],	
                //....	
            }	
        ]	
    }	
}

5. 支持加载图片

  • file-loader: 解决CSS等文件中的引入图片路径问题

  • url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候还是使用file-loader进行拷贝

如果希望图片存放在单独的目录下，那么需要指定outputPath

安装依赖:

npm install --save-dev url-loader file-loader

在 webpack.config.js 中增加 loader 的配置(增加在 module.rules 的数组中)。

module.exports = {	
    //other code	
    module: {	
        rules: [	
            {	
                test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,	
                use: [	
                    {	
                        loader: 'url-loader',	
                        options: {	
                            limit: 8192,	
                            outputPath: 'images'	
                        }	
                    }	
                ]	
            }	
        ]	
    }	
}

6.支持编译less和sass

有些前端同事可能习惯于使用less或者是sass编写css，那么也需要在 webpack 中进行配置。

安装对应的依赖:

npm install --save-dev less less-loader	
npm install --save-dev node-sass sass-loader

在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。

module.exports = {	
    //other code	
    module: {	
        rules: [	
            {	
                test: /\.less/,	
                use: ['style-loader', 'css-loader', 'less-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            },	
            {	
                test: /\.scss/,	
                use: ['style-loader', 'css-loader', 'sass-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            }	
        ]	
    }	
}

7.支持转义 ES6/ES7/JSX

ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread

在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。

module.exports = {	
    //other code	
    module: {	
        rules: [	
            {	
                test: /\.jsx?$/,	
                use: [	
                    {	
                        loader: 'babel-loader',	
                        options: {	
                            presets: ['@babel/preset-env', '@babel/react'],	
                            plugins: [	
                                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]	
                            ]	
                        }	
                    }	
                ],	
                include: path.resolve(__dirname, 'src'),	
                exclude: /node_modules/	
            },	
        ]	
    }	
}

8.压缩JS文件

安装依赖:

npm install --save-dev uglifyjs-webpack-plugin	
npm install --save-dev optimize-css-assets-webpack-plugin

在 webpack.config.js 中增加 optimization 的配置

const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');	
module.exports = {	
    //other code	
    optimization: {	
        minimizer: [	
            new UglifyWebpackPlugin({	
                parallel: 4	
            })	
        ]	
    }	
}

9.分离CSS(如果CSS文件较大的话)

因为CSS的下载和JS可以并行，当一个HTML文件很大的时候，可以把CSS单独提取出来加载

npm install --save-dev mini-css-extract-plugin

在 webpack.config.js 中增加 plugins 的配置,并且将 'style-loader' 修改为 { loader: MiniCssExtractPlugin.loader}。

CSS打包在单独目录，那么配置filename。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');	
module.exports = {	
    //other code	
    module: {	
        rules: [	
            {	
                test: /\.css/,	
                use: [{ loader: MiniCssExtractPlugin.loader}, 'css-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            },	
            {	
                test: /\.less/,	
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            },	
            {	
                test: /\.scss/,	
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            },	
        ]	
    },	
    plugins: [	
        new MiniCssExtractPlugin({	
            filename: 'css/[name].css'	
        })	
    ]	
}

10.压缩CSS文件

安装依赖:

npm install --save-dev optimize-css-assets-webpack-plugin

在 webpack.config.js 中的 optimization 中增加配置

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');	
module.exports = {	
    //other code	
    optimization: {	
        minimizer: [	
            new OptimizeCssAssetsWebpackPlugin()	
        ]	
    }	
}

11.打包前先清空输出目录

npm install --save-dev clean-webpack-plugin

在 webpack.config.js 中增加 plugins 的配置

const CleanWebpackPlugin = require('clean-webpack-plugin');	
module.exports = {	
    //other code	
    plugins: [	
        new CleanWebpackPlugin()	
    ]	
}

至此，webpack配置已经基本能满足需求。

完整webpack.config.js和package.json文件

webpack.config.js文件:

const path = require('path');	
const htmlWebpackPlugin = require('html-webpack-plugin');	
const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');	
const MiniCssExtractPlugin = require('mini-css-extract-plugin');	
const CleanWebpackPlugin = require('clean-webpack-plugin');	
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');	
module.exports = {	
    entry: path.resolve(__dirname, 'src/index.js'),	
    output: {	
        path: path.resolve(__dirname, 'dist'),	
        filename: 'bundle.js',	
        publicPath: '/'	
    },	
    devServer: {	
        contentBase: './dist',	
        port: '8080',	
        host: 'localhost'	
    },	
    module: {	
        rules: [	
            {	
                test: /\.jsx?$/,	
                use: [	
                    {	
                        loader: 'babel-loader',	
                        options: {	
                            presets: ['@babel/preset-env', '@babel/react'],	
                            plugins: [	
                                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]	
                            ]	
                        }	
                    }	
                ],	
                include: path.resolve(__dirname, 'src'),	
                exclude: /node_modules/	
            },	
            {	
                test: /\.css/,	
                use: [{ loader: MiniCssExtractPlugin.loader}, 'css-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            },	
            {	
                test: /\.less/,	
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            },	
            {	
                test: /\.scss/,	
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],	
                exclude: /node_modules/,	
                include: path.resolve(__dirname, 'src')	
            },	
            {	
                test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,	
                use: [	
                    {	
                        loader: 'url-loader',	
                        options: {	
                            limit: 1024,	
                            outputPath: 'images'	
                        }	
                    }	
                ]	
            }	
        ]	
    },	
    optimization: {	
        minimizer: [	
            new UglifyWebpackPlugin({	
                parallel: 4	
            }),	
            new OptimizeCssAssetsWebpackPlugin()	
        ]	
    },	
    plugins: [	
        new htmlWebpackPlugin({	
            template: path.resolve(__dirname, 'src/index.html'),	
        }),	
        new MiniCssExtractPlugin({	
            filename: 'css/[name].css'	
        }),	
        new CleanWebpackPlugin()	
    ]	
}

package.json文件:

{	
  "name": "webpk",	
  "version": "1.0.0",	
  "description": "",	
  "main": "webpack.config.js",	
  "scripts": {	
    "test": "echo \"Error: no test specified\" && exit 1",	
    "build": "webpack --mode production",	
    "dev": "webpack-dev-server --mode development"	
  },	
  "keywords": [],	
  "author": "",	
  "license": "ISC",	
  "devDependencies": {	
    "@babel/core": "^7.4.0",	
    "@babel/plugin-proposal-decorators": "^7.4.0",	
    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",	
    "@babel/preset-env": "^7.4.1",	
    "@babel/preset-react": "^7.0.0",	
    "babel-loader": "^8.0.5",	
    "clean-webpack-plugin": "^2.0.1",	
    "css-loader": "^2.1.1",	
    "file-loader": "^3.0.1",	
    "html-webpack-plugin": "^3.2.0",	
    "less": "^3.9.0",	
    "less-loader": "^4.1.0",	
    "mini-css-extract-plugin": "^0.5.0",	
    "node-sass": "^4.11.0",	
    "optimize-css-assets-webpack-plugin": "^5.0.1",	
    "sass-loader": "^7.1.0",	
    "style-loader": "^0.23.1",	
    "uglifyjs-webpack-plugin": "^2.1.2",	
    "url-loader": "^1.1.2",	
    "webpack": "^4.29.6",	
    "webpack-cli": "^3.3.0",	
    "webpack-dev-server": "^3.2.1"	
  },	
  "dependencies": {	
    "react": "^16.8.4",	
    "react-dom": "^16.8.4",	
    "react-redux": "^6.0.1",	
    "redux": "^4.0.1"	
  }	
}

更多loader和plugin的参数可以参考: https://www.webpackjs.com/loaders/ https://www.webpackjs.com/plugins/

如果你有其它的webpack配置需求，欢迎留言~

640?wx_fmt=jpeg

谢谢您花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，那么不要吝啬你的赞和Star哈，您的肯定是我前进的最大动力。https://github.com/YvetteLau/Blog

cpongo11
关注
webpack和babel
qq_25503949的博客
07-17 618
webpack和babel 一.为什么用webpack： 二.webpack环境搭建： 1》必须安装node.js 2》npm init -y -----package.json 3》npm install webpack webpack-cli -D ----node_modules package-lock.json 4》创建入口文件： src文件夹-index.js 5》新建webpack.config.js： mode：‘development’此时为开发者模式，压缩后的文件代码不是压缩的
【webpack】从零开始配置webpack系列(基础篇)_webpack
最新发布
2401_84181286的博客
04-30 562
指示 Webpack 从哪个文件开始打包指示 Webpack 打包完的文件输出到哪里去，如何命名等webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析扩展 Webpack 的功能。
webpack + babel新版本
jdk1129的博客
05-14 551
webpack：4.31.0 babel：7 按照视频教程做一直报错，后来看官网加找了篇文章终于通了 安装的包有这几个： 一开始没有装@babel/runtime报错： babel的配置文件.babelrc webpack.config.js中配制处理高级js语法的loader ...
webpack与babel
gao_zhennan的博客
10-25 734
webpack
了解webpack和babel
wuya1028的博客
09-23 157
一、准备工作 创建目录： mkdir mobx-test 进入目录： cd mobx-test 创建src目录： mkdir src 创建文件： touch src/index.js 创建包含默认内容的package.json文件： npm init -y 创建webpack配置文件： touch webpack.config.js 下载相关依赖包：npm i 相关依赖 -D npm i webpack webpack-cli babel-core b
基于webpack4.X从零搭建React脚手架的方法步骤
10-17
从零开始搭建react工程 <div id="root"></div> <script src="../dist/js/bundle.js"></script> ``` 接下来，在根目录下创建app文件夹，并添加index.js文件。在index.js文件中，通过React和ReactDOM库来渲染...
从零开始搭建webpack+react开发环境的详细步骤
12-10
【从零开始搭建webpack+react开发环境的详细步骤】 在开始搭建webpack+react开发环境之前，首先需要了解一些基础概念。Webpack是一个模块打包工具，它将JavaScript、CSS、图片等资源视为模块，通过配置和使用各种...
详解如何用webpack4从零开始构建react开发环境
10-17
本文详细介绍了如何从零开始使用webpack4来构建React开发环境。React是由Facebook开发的一个用于构建用户界面的JavaScript库，而webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。webpack在...
webpack和babel的使用
weixin_44292923的博客
03-24 670
webpack的使用 需要安裝node.js 初始化package.json npm init -y // -y安装默认的省略回车 安装webpack 和webpack-cli npm install webpack webpack-cli -D //-D y 创建一个webpack.config.js的文件 const path = require('path') //引入路径 modul...
Web前端 - webpack和babel勾结
戴晨的博客
10-06 663
Web前端 - webpack和babel勾结webpack 就是一个打包工具 JS 图片 各种都就可以打包。安装webpacknmp install webpack在项目根目录建立配置文件：module.exports = { entry:[ //entry 是入口文件，可以多个，代表要编译那些js './daichen.js' ], output: {
【Webpack】与【Babel】详细说明介绍
weixin_52479803的博客
03-02 771
【Webpack】与【Babel】详细说明介绍
webpack4.x下babel的安装、配置及使用
热门推荐
u012443286的博客
10-13 2万+
前言 　　目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。那么在webpack中如何使用babel呢？这是本篇文章要探讨的问题。 　　写这篇文章的目的还在于最新webp...
webpack4 + babel7配置
weixin_52950296的博客
07-20 484
项目场景：webpack4 + babel7配置 一个加载展示3D动态模型（3D模型格式是.dae）的demo，在google和火狐高版本中运行都没有问题，但是火狐的低版本（比如51，由于项目中需要51版本）中无法兼容代码中相关的es6语法，最后想通过webpack将需要的代码打包出来使用。 问题描述： 代码中使用的一下外部js中都是es6的语法，引入也必须使用import，为了在火狐上兼容，尝试使用webpack+babel实现。 下面记录一下使用webpack和babel的整个过程以及遇到的问
webpack@4中babel7配置
huzhenv5的博客
03-28 969
安装 首先确保本地已经安装了webpack和webpack-cli 安装babel-loader npm i -D babel-loader 安装玩后，控制台有提示： 按照提示安装@babel/core@^7.0.0 npm i -D @babel/core@^7.0.0 继续安装@babel/preset-env npm i -D @babel/preset-env 注意： 注意版本冲...
webpack打包6之配置高版本js兼容-配置babel
qq_40922656的博客
09-06 184
webpack使用babel处理高版本的js语法 1、安装包 yarn add -D babel-loader @babel/core @babel/preset-env 2、配置 module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: {
Vue、Vue CLI、Webpack 和 Webpack CLI 的版本兼容对照表
qq_24600981的博客
05-23 6222
这些指南只是一些常见的版本兼容性指南。在实际项目中，取决于具体的应用场景和使用的组件库，不同版本之间可能还存在其它的兼容性问题。因此，我们建议使用最新版本的 Vue、Vue CLI、Webpack 和 Webpack CLI 来获得最佳的性能、安全性以及最新的功能和改进。同时，在使用前应该先了解相应版本的官方文档和版本兼容性指南。
babel6升级babel7，webpack3升级webpack4
Cynthia_Yue27的博客
09-01 2477
babel7/webpack4升级
webpack4.29.6搭建常用功能的环境
weixin_33901641的博客
04-01 310
因项目需要，用webpack搭建一个常用功能的环境。 初步功能罗列如下： 自动配置多入口出口 less转css css前缀自动补齐 css提取成单独文件 css压缩 图片压缩 引入字体和svg js Babel 压缩 css和js的分离/合并和过滤 1.建立并且进入文件夹 mkdir webpack4.29.6 && cd webpack4.29.6 复制代码2.如下图建立各个de...
webpack4新手入门教程：从零开始的打包配置解析
Webpack 4 提供了“零配置”（zero-config）的概念，即默认配置能处理基础的JavaScript和CSS文件。但实际项目中，通常需要自定义配置来满足特定需求。 1. **基本配置**： - `plugins`：用于添加和配置Webpack插件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cpongo11

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值