Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)(上)

简介: Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)

Webpack中模式(Mode)



提供 mode 配置选项,告知 webpack 使用相应模式的内置优化。

'none'| 'development' | 'production'


选项  描述
development 会将 DefinePluginprocess.env.NODE_ENV 的值设置为 development . 为模块

production

会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production 。为模块和

FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenati

TerserPlugin 。

none 不使用任何默认优化选项


实现模式(Mode)有两种方式:


第一种:只需在配置对象中提供 mode 选项

module.exports = {
 mode: 'development',
};


第二种:从 CLI 参数中传递

webpack --mode=development


Webpack中使用DevServer



到目前为止 webpack 基本上可以正常使用了,但在实际开发中你可能会需要:


1、提供 HTTP 服务而不是使用本地文件预览;

2、监听文件的变化并自动刷新网页,做到实时预览;

3、支持 Source Map,以方便调试。


对于这些, Webpack 都为你考虑好了。Webpack 原生支持上述第2、3点内容,结合官方提供的开发工具 DevServer 也可以很方便地做到第1点。 DevServer 会启动一个 HTTP 服务器用于服务网页请求,同时会帮助启动 Webpack ,并接收 Webpack 发出的文件更变信号,通过 WebSocket 协议自动刷新网页做到实时预览


安装服务器依赖

npm install -g webpack-dev-server@4.9.2
npm install --save-dev webpack-dev-server@4.9.2


修改配置文件

const path = require('path');
module.exports = {
  devServer: {
    // 服务器打开目录
    static: path.join(__dirname,'public'),
    // 开启压缩
    compress: true,
    // 设置端口
    port: 9000,
    // 热更新
    hot: true,
    // 自动打开浏览器
    open: true,
    //使用 History 路由模式时,若404错误时被替代为 index.html
    historyApiFallback: true
 }
};


服务器运行方式

1、webpack serve

2、webpack-dev-server


温馨提示

修改配置文件的情况下,是无法热更新的,需要重启服务器,热更新只对代码剩下 src


配置快捷运行方案



配置快捷运行方案可以方便我们统一运行方式,不然我们需要记忆更多关键词例如: webpack 、 webpack serve 、 webpack-dev-server 等等


修改方案


package.json 中, scripts 中进行配置

"scripts": {
  "start": "webpack",
  "dev":"webpack serve"
}


温馨提示

如果在 package.json 文件中,并没有找到 scripts ,可以通过执行 npm init 重新生成 package.json 文件


运行方式

npm start  // 相当于运行webpack
npm run dev // 相当于运行webpack serve


开发模式与生产模式分离



在开发的过程中,我们一般会将开发环境进行区分:


1、开发环境

2、测试环境

3、生产环境

4、...


开发模式


开发模式是为开发者更方便开发而存在的,在开发模式下,一般是为了更方便的调试,所以错误信息会提示很全面,并且存在热更新状态等


生产模式


生产模式是为了项目打包上线而存在的,在生产模式下,会去掉更多的错误提示,让想打包尽可能变小等

webpack 配置开发模式和生产模式


webpack 中,我们可以区分开发模式和生产模式,例如 mode 就有 developmentproduction 的区别


安装依赖:


webpack-merge 可以用来合并多个配置文件:

npm install --save-dev webpack-merge@5.8.0


创建开发和生产模式文件


在项目根目录下创建 webpack.dev.config.jswebpack.prod.config.js 文件

// webpack.dev.config.js
const commonConfig = require("./webpack.config");
const path = require('path');
const { merge } = require("webpack-merge");
const devConfig = {
  mode: 'development',
  devServer: {
    // 服务器打开目录
    static: path.join(__dirname,'public'),
   // 开启压缩
    compress: true,
    // 设置端口
    port: 9000,
    // 热更新
    hot: true,
    // 自动打开浏览器
    open: true,
    //使用 History 路由模式时,若404错误时被替代为 index.html
    historyApiFallback: true
 }
}
module.exports = merge(commonConfig,devConfig)
/ webpack.prod.config.js
const commonConfig = require("./webpack.config");
const { merge } = require("webpack-merge");
const prodConfig = {
  mode: 'production'
}
module.exports = merge(commonConfig,prodConfig)


重新配置运行方式

"scripts": {
  "start": "webpack --config webpack.prod.config.js",
  "dev": "webpack-dev-server --config webpack.dev.config.js"
}


Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)(下):https://developer.aliyun.com/article/1420345

目录
相关文章
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
50 0
|
2月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
48 0
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
3月前
|
前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(上)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
36 2
|
3月前
|
Web App开发 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
24 0
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
27 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
19 0
|
4月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
106 0