想自己做淘宝有什么网站吗,中小型网站设计公司,wordpress下载管理,广州顺德网站设计webpack学习-4.开发环境 1.mode2.使用source map3.自动编译代码3.1 webpack 的 观察模式3.2 使用 webpack-dev-server3.3 使用 webpack-dev-middleware 4.总结 1.mode
本章的标题一看就是开发环境#xff0c;那就要引入webpack配置文件的mode了。 mode 属性用于指定 Webpack … webpack学习-4.开发环境 1.mode2.使用source map3.自动编译代码3.1 webpack 的 观察模式3.2 使用 webpack-dev-server3.3 使用 webpack-dev-middleware 4.总结 1.mode
本章的标题一看就是开发环境那就要引入webpack配置文件的mode了。 mode 属性用于指定 Webpack 的构建模式它有三个可选值 development用于开发环境启用有用的开发工具和更详细的错误信息以增加构建速度和保持调试能力。 production用于生产环境启用优化功能如代码压缩、作用域提升、副作用消除等以生成更小、更高效的输出文件。 none不应用任何默认优化或开发工具。 使用 mode 属性可以让 Webpack 根据不同的环境自动应用相应的优化和配置。例如在开发环境中你可能希望保留源代码的映射以方便调试而在生产环境中你可能希望进行代码压缩和优化。
如果你没有指定 mode 属性Webpack 将默认使用 production 模式。这意味着如果你没有明确设置 modeWebpack 将应用生产环境的优化配置。
虽然 mode 属性不是必需的但建议在 Webpack 配置文件中设置它以便根据不同的环境自动应用适当的配置和优化。这样可以简化配置并确保生成的输出文件在不同的环境中具有最佳的性能和功能。
总结下就是mode最好写上。目前没体会到它的很大区别之后再看。呜呜呜
2.使用source map
当 webpack 打包源代码时可能会很难追踪到错误和警告在源代码中的原始位置。例如如果将三个源文件a.jsb.js 和 c.js打包到一个 bundlebundle.js中而其中一个源文件包含错误那么堆栈跟踪就会直接指向到 bundle.js却无法准确知道错误来自于哪个源文件所以这种提示通常无法提供太多帮助。 按例子在print.js里写上一句错误代码
export default function printMe() {conole.log(I get called from print.js12!);}如果直接打包运行会看到浏览器控制台有报错消息 点击跳转到出错的代码地方 额不是源码也。所以引入source-map,实际上就是在webpack配置文件中加上一句devtool: ‘inline-source-map’。打包运行结果: 对开发就很香
3.自动编译代码
每次编译代码都需要手动运行 npm run build 会显得很麻烦。 webpack 提供了几种可选方式帮助在代码发生变化后自动编译代码 1.webpack 的 观察模式 2.webpack-dev-server 3.webpack-dev-middleware 3.1 webpack 的 观察模式
可以指示 webpack “观察”依赖图中所有文件的更改。如果其中一个文件被更新代码将被自动重新编译所以不必再去手动运行整个构建。 我们在package.json中添加一个用于启动 webpack 观察模式的 npm scripts {name: webpack-demo,version: 1.0.0,description: ,private: true,scripts: {test: echo \Error: no test specified\ exit 1,watch: webpack --watch,//这一行是新加的build: webpack},keywords: [],author: ,license: ISC,devDependencies: {html-webpack-plugin: ^4.5.0,webpack: ^5.4.0,webpack-cli: ^4.2.0},dependencies: {lodash: ^4.17.20}}在命令行中运行 npm run watch然后就会看到 webpack 是如何编译代码的。 编译完成后会发现它并没有退出命令行这是因为该脚本当前还在观察你的文件。 现在在 webpack 仍在观察文件的同时移除之前print.js故意加入的错误然后保存。应该可以看到 webpack 已经自动地重新编译修改后的模块但是你再点击按钮还是会报错的。这也是这种方法的不足需要手动刷新浏览器才能看到修改后的实际效果。
3.2 使用 webpack-dev-server
实现 webpack-dev-server 将能够自动刷新浏览器 先安装依赖:
npm install --save-dev webpack-dev-server接下来修改配置文件webpack.config.js告诉 dev server 应从什么位置开始查找文件
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {mode:production,entry: {index: ./src/index.js,print: ./src/print.js,},devtool: inline-source-map,devServer: {static: ./dist,},//新增plugins: [new HtmlWebpackPlugin({title: Development,}),],output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),clean: true},optimization: {runtimeChunk: single,},//新增
};以上配置告知 webpack-dev-server 将 dist 目录下的文件作为可访问资源部署在 localhost:8080。。 再添加一个可以直接运行 dev server 的 script {name: webpack-demo,version: 1.0.0,description: ,private: true,scripts: {test: echo \Error: no test specified\ exit 1,watch: webpack --watch,start: webpack serve --open,//新增的build: webpack},keywords: [],author: ,license: ISC,devDependencies: {html-webpack-plugin: ^4.5.0,webpack: ^5.4.0,webpack-cli: ^4.2.0,webpack-dev-server: ^3.11.0},dependencies: {lodash: ^4.17.20}}现在在命令行中运行 npm start会看到浏览器自动加载页面。更改任何源文件并保存它们web server 将在编译代码后自动重新加载
3.3 使用 webpack-dev-middleware
webpack-dev-middleware 是一个包装器它可以把 webpack 处理过的文件发送到 server。这是 webpack-dev-server 内部的原理但是它也可以作为一个单独的包使用以便根据需求进行更多自定义设置。下面是一个 webpack-dev-middleware 配合 express server 的示例。 首先安装 express 和 webpack-dev-middleware
npm install --save-dev express webpack-dev-middleware现在调整 webpack 配置文件以确保能够正确启用中间件
const path require(path);const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {mode: development,entry: {index: ./src/index.js,print: ./src/print.js,},devtool: inline-source-map,devServer: {static: ./dist,},plugins: [new HtmlWebpackPlugin({title: Development,}),],output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),clean: true,publicPath: /,//新增},};在 server 脚本使用 publicPath以确保文件资源能够作为可访问资源正确部署在 http://localhost:3000 下稍后我们会指定端口号。接下来是设置自定义 express server 在dist同级新建server.js:
const express require(express);
const webpack require(webpack);
const webpackDevMiddleware require(webpack-dev-middleware);const app express();
const config require(./webpack.config.js);
const compiler webpack(config);// 告知 express 使用 webpack-dev-middleware
// 以及将 webpack.config.js 配置文件作为基础配置。
app.use(webpackDevMiddleware(compiler, {publicPath: config.output.publicPath,})
);// 将文件 serve 到 port 3000。
app.listen(3000, function () {console.log(Example app listening on port 3000!\n);
});现在添加 npm script 以便更方便地运行 server {name: webpack-demo,version: 1.0.0,description: ,private: true,scripts: {test: echo \Error: no test specified\ exit 1,watch: webpack --watch,start: webpack serve --open,server: node server.js,//新增build: webpack},keywords: [],author: ,license: ISC,devDependencies: {express: ^4.17.1,html-webpack-plugin: ^4.5.0,webpack: ^5.4.0,webpack-cli: ^4.2.0,webpack-dev-middleware: ^4.0.2,webpack-dev-server: ^3.11.0},dependencies: {lodash: ^4.17.20}}在终端执行 npm run server将会有类似如下信息输出 打开浏览器访问 http://localhost:3000应该看到 webpack 应用程序已经运行 例子中的代码是不会实时同步更改到浏览器
4.总结
1.mode的配置环境 2.source-map:代码映射可以帮助你将编译后的代码映射回原始源代码使得在开发环境中进行工作更加方便。你可以在浏览器中查看和编辑原始源代码而不需要跟踪和修改编译后的代码。 3.自动编译代码: 1.使用观察模式,缺点需要手动刷新浏览器 2.使用 webpack-dev-server 3.使用 webpack-dev-middleware,构建代码并不会自动同步更改到浏览器;这个待定
