webpack 开发模式管理 Development

最新推荐文章于 2024-03-31 23:04:55 发布
最新推荐文章于 2024-03-31 23:04:55 发布
阅读量296 收藏
点赞数
文章标签： webpack json javascript ViewUI
原文链接：https://juejin.im/post/5c8e55dbe51d4554d153f5c2
版权

webpack 开发模式管理 Development

GitHub 学习 Demo。

接下来将一些开发时的 webpack 配置。

warnning ： 本指南中的工具仅用于开发，请避免在生产中使用它们！

先把 mode 属性变为 development.

# webpack.config.js

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

  module.exports = {
+   mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
复制代码

使用 source maps

当webpack捆绑您的源代码时，很难找到错误和警告到其原始位置。因为此时错误都是从 bundle.js 里抛出的，而这是一个经过编译的文件。。。

JavaScript 提供 source maps ，能将编译后的代码映射回原始源代码。 如果错误源自b.js，源地图将准确地告诉您。

这里选用 devtool: 'inline-source-map' 选项达到这一目的。关于 devtool 的更多选项及其功能，请点链接阅读。

# webpack.config.js

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

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
  
# src/print.js
# 写一段错误语法的代码

  export default function printMe() {
-   console.log('I get called from print.js!');
+   cosnole.log('I get called from print.js!');
  }
复制代码

编译后回发现报错：

Uncaught ReferenceError: cosnole is not defined
   at HTMLButtonElement.printMe (print.js:2)
复制代码

选择一个 Development Tool

现在的程序，每次需要查看新的结果，都要重新编译一次，非常的麻烦。
有几种方法可以实现，你代码发生变化时，自动从新编译:

  • wepback 的 Watch Mode （观察模式）
  • webpack-dev-server
  • webpack-dev-middleware

大多数情况下都会选用 webpack-dev-server。但接下来每个都会讲到。

Watch Mode

使用 webpack 的命令行选项 --watch 实现。
添加一段 npm script :

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "watch": "webpack --watch",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }
复制代码

现在从命令行运行npm run watch，看看webpack如何编译你的代码。 您可以看到它不会退出命令行，因为脚本当前正在查看您的文件。

此时当你保存代码修改的时候，就会促发重新编译。

但这个功能的缺点就是，该功能仅是监听到代码变化后重新编译，但浏览器不会自定更新变化。webpack-dev-server 可以解决这个问题。

webpack-dev-server

webpack-dev-server为您提供了一个简单的Web服务器，并能够使用实时重新加载。 我们来设置一下：

依赖
npm install --save-dev webpack-dev-server
复制代码
修改配置
# webpack.config.js

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

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
复制代码

tips :
webpack-dev-server在编译后不会写任何输出文件。 相反，它将捆绑文件保存在内存中并为它们提供服务，就好像它们是安装在服务器根路径上的真实文件一样。

如果您的页面希望在不同的路径中找到捆绑包文件，则可以使用dev服务器配置中的publicPath选项进行更改。

修改 npm script
# package.json

 {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }
复制代码

现在我们可以从命令行运行npm start，我们将看到我们的浏览器自动加载我们的页面。 如果您现在更改任何源文件并保存它们，Web 服务器将在编译代码后自动重新加载。

关于 webpack-dev-server 的更多选项。

webpack-dev-middleware

webpack-dev-middleware是一个包装器，它将 webpack 处理的文件发送到服务器。 这在webpack-dev-server内部使用，但是它可以作为单独的包提供，以便在需要时允许更多自定义设置。 我们将看一个将webpack-dev-middleware与express server服务器相结合的示例。

安装依赖
npm install --save-dev express webpack-dev-middleware
复制代码
修改配置

现在我们需要对webpack配置文件进行一些调整，以确保中间件能够正常运行：

# webpack.config.js

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

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
+     publicPath: '/'
    }
  };
复制代码

publicPath 将在我们的服务器脚本中使用，以确保在http：// localhost：3000上正确提供文件。 我们稍后会指定端口号。 下一步是设置我们的自定义express server服务器：

创建 server
  webpack-demo
  |- package.json
  |- webpack.config.js
+ |- server.js
  |- /dist
  |- /src
    |- index.js
    |- print.js
  |- /node_modules

# 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);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});
复制代码
现在添加一个npm script，使其更容易运行服务器：
# package.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
      "start": "webpack-dev-server --open",
+     "server": "node server.js",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "webpack-dev-middleware": "^1.12.0",
      "xml-loader": "^1.2.1"
    }
  }
复制代码

运行 npm run server，浏览器打开 http：// localhost：3000。 您应该看到您的webpack应用程序正在运行并运行！

但是，你会发现更新代码时只会重新编译。如果需要热更新功能需要自己配置你得服务器脚本。

这种自定义开发服务器的方式非常灵活，但需要你具备一定的 node.js 基础。

NEXT

既然您已经学会了如何自动编译代码并运行一个简单的开发服务器，下一步就来认识 Hot Module Replacement 热模块切换。

转载于:https://juejin.im/post/5c8e55dbe51d4554d153f5c2

weixin_34161032
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack初体验_使用webpack打包js文件_json文件_使用webpack开发模式_生产模式打包---webpack工作笔记003
添柴程序猿的专栏
02-27 294
我们首先去初始化一下npm npm init 然后package name 输入webpack_test 然后初始化npm以后,我们去 安装npm i webpack webpack-cli -g 全局安装一下webpack以及webpack-cli 然后全局安装. webpack-cli 这个是支持在命令行操作的软件包 然后安装了以后,我们再去指定,以后webpack,操作我们的文件,以及js的依赖,都使用开发者模式 npm i webpack webpack-cli -...
Webpack开发环境配置
Sixology的博客
08-10 260
Webpack开发环境配置 1.运行指令 开发环境：webpack ./src/index.js -o ./bulid/build.js --mode=development webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/build.js,整体打包环境是开发环境 生产环境：webpack ./src/index.js -o ./bulid/build.js --mode=production webpack 会以 ./src/
Redis开启AOF和RDB两种持久化（数据恢复小demo）
whiteBearClimb的博客
11-17 1203
AOF和RDB的区别网上一大把，可以去背书一样背，理论太多，直接实操 首先有几点： （1）Redis开启持久化非常简单，只要改个配置，踩点坑就行。 （2）配置文件中如果开启了持久化，那就不需要我们操心，它服务重启会自动恢复数据，跟我们的springboot, Java，node，半毛钱关系没有。 （3）MacBook，Linux，Windows虽然改配置文件是一样的，但是有些坑是不一样的。 （4）一定要注意自己的版本！一定要注意自己的 redis 的版本！一定要注意自己本地的redis的版本！！ （1）查看
webpack指定开发模式
迎接小天使
08-08 228
报错日志 WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any
webpack的development和production模式
qq_43157227的博客
09-21 490
webpack的development和production打包模式学习以及打包运行的常见问题
01_Webpack基础（开发模式）
zyq的博客
05-03 598
开发模式：仅能编译 JS 中的ES Modle语法生产模式：能编译 JS 中的ES Modle语法，和压缩 JS 代码。
webpack搭建开发环境
最新发布
m0_57851747的博客
03-31 1972
3.使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果。2.问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV。作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页，不用自己一直重新打包。：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）
一个自己写的webpack单入口demo支持开发模式和生产模式两种方式
08-11
Webpack 提供了两种运行模式：开发模式（development）和生产模式（production）。开发模式下，Webpack 提供更快的编译速度和实时重载功能，便于开发者快速迭代。而生产模式则会进行更深度的优化，如代码压缩、去除...
webpack 开发和生产并行设置的方法
10-17
当我们在命令行中运行`npm run dev`时，Webpack将以开发模式运行，而`npm run build`将会以生产模式运行。 ### webpack.config.js配置 在webpack.config.js文件中，可以使用环境变量来区分开发和生产配置。通过...
webpack配置代码-切换生产模式和开发模式
weixin_44422620的博客
09-20 360
切换模式
webpack基本配置、开发者模式介绍
m0_68997646的博客
10-31 262
webpack基本配置、开发者模式介绍
webpack 合作开发模式初探（一）
plyshishabi的博客
08-08 562
一，背景知识 1，webpack。2，react。 二，正文 目前react＋webpack已经成为了很多公司前端架构的选择。前端采用react的优点是模块可服用程度高，异步刷新，合作方便等。webpack打包可以让我们省去压缩，编译等工作，安心写代码。 但是据我目前实践看来，webpack打包模式还是有一些坑的，这里我就据我踩的一些坑探索一下什么是webpack＋react最佳工作模式
webpack中development和production的理解
A_Common_Man的博客
05-02 2431
development和production的怎么去理解，其作用是什么
webpack常用命令
09-15 182
调试代码 webpack 线上发布的方式进行打包 webpack -p 监听文件的改变和编译 webpack --watch 改变配置文件位置 webpack --config webpack.config.js 指定webpack模式 webpack --modedeve...
和webpack有关
hanmou77的博客
04-16 511
安装webpack遇到的一些问题MAC 第一步$ sudo -s 原因分析是：在mac下依赖包要写入系统重要文件夹里，由于没有先获取root权限所以写入失败，导致安装失败。mac 还有一步操作就是，终端先执行如下命令npm install --save-dev webpack -g 输入以上命令后: webpack -v 提示:The CLI moved into a separate packa...
webpack相关
xiaohua307的博客
01-31 121
webpack笔记
webpack如何兼容开发模式和生产模式
讨厌走开啦
06-06 3706
在前端工程中引入webpack后，开发人员往往会有下面两个疑问： webpack的编译实际上是对代码执行合并、压缩和混淆等动作，最终生成的代码往往已经不具备可读性，不利于开发对问题进行debug； 每次代码修改都需要webpack执行一次编译动作，上面提到的合并、压缩和混淆等动作过于消耗性能。 首先看一下可读性问题，以笔者上一篇博客的代码为例，我们在mainCtrl.js里故意构造一个脏检...
Webpack5学习笔记（基础篇）
qq_44486437的博客
05-28 526
Webpack 基本概念 是什么？ 是一个静态资源打包工具。 可以做什么？ 分为两种模式，分别是开发模式和生产模式。 开发模式（development）：仅能编译JS中的ES Module语法 生产模式（product）：既能编译JS中的ES Module语言，还能压缩JS代码 入门 创建项目（文件夹） 在项目所在文件夹中使用npm init生成package.json文件 使用npm install webpack webpack-cli -g安装webpack 使用npx webpack ./sr
手摸手实现一个webpack
astonishqft的博客
03-12 2459
一文带你了解webpack的打包机制，手把手教你如何实现一个简易版的webpack
Webpack开发与生产环境依赖管理详解
同时，package.json文件的scripts部分也提供了与环境相关的命令，如`"dev": "settype=d"`，用于切换到开发模式，而`"server": "webpack-dev-server --open"`用于启动开发服务器。通过这种方式，可以根据环境的不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值