Webpack中模式(Mode)
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
'none'| 'development' | 'production'
| 选项 | 描述 |
| development | 会将 DefinePlugin 中 process.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 就有 development 和 production 的区别
安装依赖：
webpack-merge 可以用来合并多个配置文件：
npm install --save-dev webpack-merge@5.8.0
创建开发和生产模式文件
在项目根目录下创建 webpack.dev.config.js 和 webpack.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中devtool增强调试过程
我们可以通过 devtool 来设置增强调试过程
通过设置 devtool 生成source map
Source Map
1、source map 是一个信息文件，里面存储着代码压缩前后的位置信息。
2、即可以在Debug时直接显示原始代码的位置信息，而不是压缩后的，极大方便后期调试
开发环境下默认生成的Source Map ，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题
解决方案：在webpack.dev.config.js中添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致
const commonConfig = require("./webpack.config"); const { merge } = require("webpack-merge"); const devConfig = { mode: 'development', //此选项生成的 Source Map 能保证运行时的报错行数与源代码的行数保持一致 devtool:'source-map' } module.exports = merge(commonConfig,devConfig)
Source Map 的最佳实践
开发模式下
建议直接把devtool 的值设置为 source-map ,可以直接定位到具体的错误行
生产环境下
建议关闭Source Map 或者 将devtool 设置为 hidden-nosources-source-map ,防止源码泄漏，提高网站的安全性
.browserslistrc文件说明
browserslistrc文件是为了表示当前项目的浏览器兼容情况
使用方式有三种：
1、在package.json中设置
2、设置成独立的配置文件
3、某些插件需要重新设置browserslist
我们参考Vue项目的环境配置，选择第二种方式，设置成独立的配
置文件
在项目的根目录下创建 .browserslistrc 文件
> 1% // 兼容市场上占有率超过1%的浏览器(世界级) last 2 versions // 兼容浏览器最近的两个版本 not dead // 不支持24个月内没有官方支持或者更新的浏览器 not ie 11 // 不支持ie 11
postcss-loader处理css兼容
postcss是JavaScript转换样式的工具，这个工具能处理css兼容问题。就是这个工具能给我们写的css代码添加一些兼容的前缀
安装
npm install --save-dev autoprefixer@10.4.7 npm install --save-dev postcss@8.4.14 npm isntall --save-dev postcss-loader@7.0.0 npm install --save-dev postcss-preset-env@7.7.1
在项目根目录下创建 postcss.config.js 文件
// postcss.config.js module.exports = { plugins: { "autoprefixer":{ "overrideBrowserslist":[ // 兼容IE7以上浏览器 "ie >= 8", // 兼容火狐版本号大于3.5浏览器 "Firefox >= 3.5", // 兼容谷歌版本号大于35浏览器, "chrome >= 35" ] } } }
修改 webpack.config.js 文件
rules: [ { test: /\.css$/, use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader"] }, { test: /\.less$/, use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","less-loader"] }, { test: /\.(scss|sass)$/, use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","sass-loader"] } ]
修改CSS文件
.root{ width: 400px; height: 200px; background-color: #f1f1f1; display: flex; }
Webpack构建React环境
目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目
接下来，我们用 webpack 构架一个React项目的环境
安装
npm install -D @babel/preset-react@7.17.12 npm install -S react@18.2.0 npm install -S react-dom@18.2.0
增加配置文件
React使用的语法为 jsx 语法，所以我们需要配置 jsx 的解析模块
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }
同时我们需要修改 babel.config.js 文件
module.exports = { presets: [ '@babel/preset-env', "@babel/preset-react" ] }
编写React代码
import React from 'react' import ReactDom from 'react-dom' class App extends React.Component { render(){ return ( <div style={{color:"#333"}}> Hello </div> ) } } ReactDom.render(<App/>,document.getElementById("root"))
Webpack构建Vue环境
目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目
接下来，我们用 webpack 构架一个Vue项目的环境
安装
Vue专属文件时 .vue ,我们需要一些包帮助去解析他
npm install --save vue@3.2.37 npm install --save-dev vue-loader@17.0.0 npm install --save-dev vue-style-loader@4.1.3 npm install --save-dev vue-template-loader@1.1.0 npm install --save-dev vue-template-compiler@2.6.14
增加配置文件
在 webpack.config.js 文件中
const { VueLoaderPlugin } = require('vue-loader') const baseConf = { module:{ { test: /\.vue$/, use: ['vue-loader'] } }, plugins:[ new VueLoaderPlugin() ] }
编写Vue代码
// index.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#root')
// App.vue <template> <p>Vue文件环境测试</p> </template> <script> export default { } </script> <style> p{ color: red; } </style>
