webpack 之 搭建 本地服务器 && 环境

已于 2022-09-30 15:29:51 修改
阅读量2.1k 收藏 16
点赞数 14
分类专栏： webpack 文章标签： webpack javascript
于 2022-05-16 15:51:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15297701931/article/details/124728699
版权

大家可以先去看我的前两篇文章，顺便可以点个三连哦，嚯嚯嚯～

webpack 之 使用 loader && babel

webpack 之 使用 plugin && mode

目录

一、开启本地服务器

1. 理由

2. 方式一 ：wabpack watch

3. 方式二 ：wabpack-dev-server ( 常用 )

1. 安装webpack-dev-server

2. 在package.json中配置

3. 使用npm run serve !!!!!!

4. 现在能实时更新了

二、devServer 配置 DevServer | webpack

1. static/directory : 

2. HMR : 模块热替换 ( 重要 )

3. port

4. open

5. compress

6. host 

7. proxy配置

三、如何区分开发环境 ：优化

1. 在根目录创建config文件夹，并创建几个文件

2. 修改package.json中的配置

3. webpack.comm.config.js配置

4. webpack-merge

5. webpack.dev.config.js配置

6. webpack.prod.config.js配置 

一、开启本地服务器

1. 理由

 之前开发的代码，为了运行需要两个步骤

  • 操作一：npm run build，编译相关的代码
  • 操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果

这样效率太慢了，所以希望当文件变化时，可以自动完成编译和展示

 

为了完成自动编译，webpack提供了几种可选的方式

  • webpack watch mode
  • webpack-dev-server（常用）
  • webpack-dev-middleware

2. 方式一 ：wabpack watch

在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码会被重新编译，我们不需要手动去运行npm run build

 

ps : 这种方式事实上本身是没有自动刷新浏览器功能的（之前是因为有live-server）

开启watch也有两种方式

  • 在导出的配置中，添加 watch : true

  •  在package.json中，把以前写的那个打包的命令后加上 -- watch

 这样后是不是发现下方变成了这样 ，两种方式用一个即可

3. 方式二 ：wabpack-dev-server ( 常用 )

wabpack-dev-server   =>   具备自动打包和实现监听功能

 

ps : 运行后并不会生成本地的文件，打包到了内存里，没有输出出来，这是为了提高效率

1. 安装webpack-dev-server

npm install webpack-dev-server -D

2. 在package.json中配置

3. 使用npm run serve !!!!!!

4. 现在能实时更新了

最后开发完成后，再自己npm run build一下生成打包文件即可

二、devServer 配置 DevServer | webpack

1. static/directory : 

  • 浏览器请求打包后的资源，如果没有请求到，会自动去这个文件夹进行查找（也就是说没有打包的资源，如果放到这个文件夹里，也能进行访问）

  • 可以进行动态配置，因为开发阶段时如果我们也在使用CopyWebpackPlugin插件，每次运行的效率就会比较低，所以开发阶段我们可以关闭CopyWebpackPlugin直接使用这个

  • 生产阶段的时候在打开CopyWebpackPlugin （这就涉及到动态配置了，可以使用）

  • 总而言之 开发阶段：使用这个 ｜ 生产阶段：CopyWebpackPlugin

devServer: {
    static: {
      // 指定路径
      directory: path.join(__dirname, 'public')
    }
}

2. HMR : 模块热替换 ( 重要 )

  • HMR => Hot Module Replacement，模块热替换
  • 指在应用程序运行过程中，替换、添加、删除模块，而无需刷新整个页面
  • 好处一 : 不重新加载整个页面，可以保留某些应用程序状态不丢失
  • 好处二 : 只更新需要变化的内容，节省开发的时间

原理（理解即可）

  • webpack-dev-server会创建两个服务：提供静态资源的服务(express)和socket服务(net.socket)
  • express server扶着直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)
  • HTM Socket Server ,是一个socket的长链接
  • 当服务器监听到对应的模块发生改变时，会生成两个.json文件
  • 通过长链接，直接将这两个文件发送给客户端（浏览器）
  • 浏览器拿到文件后，加载这两个文件，针对修改的模块进行更新

webpack-dev-serve已经支持了HMR，我们只需要开启即可

 

如果不开启，当我们修改代码后，整个页面会自动刷新，使用的是live-reloading

tip : 最好同时使用target配置

// 配置服务
devServer: {
  static: {
    // 指定路径
    directory: path.join(__dirname, 'public')
  },
  //  模块热替换
  hot: true,
},

其实这样配置后，hot还是不生效，页面还是会刷新～，是因为引入的方式还要改，可恶

 

因为需要去指定哪些模块发生更新时，进行HMR

但是我们真实开发是不需要这样的，使用vue，react框架的时候，vue-loader等会自动支持hot，不需要我们自己来写，所以，我们只需要了解一下即可

3. port

port设置监听的端口，默认情况下是8080

// 配置服务
devServer: {
  static: {
    // 指定路径
    directory: path.join(__dirname, 'public')
  },
  //  模块热替换
  hot: true,
  // 设置端口号
  port: 9000,
},

4. open

open是否打开浏览器 =>  默认值是false，设置为true会打开浏览器

// 配置服务
devServer: {
  static: {
    // 指定路径
    directory: path.join(__dirname, 'public')
  },
  //  模块热替换
  hot: true,
  // 设置端口号
  port: 9000,
  // 是否自动打开浏览器
  open: true
},

5. compress

compress是否为静态文件开启gzip compression =>  默认值是false

// 配置服务
devServer: {
  static: {
    // 指定路径
    directory: path.join(__dirname, 'public')
  },
  //  模块热替换
  hot: true,
  // 设置端口号
  port: 9000,
  // 是否自动打开浏览器
  open: true,
  // 启动gzip压缩
  compress: true,
},

6. host 

host设置主机地址 : 

  • 默认值是localhost
  • 如果希望其他地方也可以访问，可以设置为 0.0.0.0

localhost 和 0.0.0.0 的区别 : 

  • localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1
  • 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收
    • 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层
    • 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的
    • 比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的
  • 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序
    • 比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的
devServer: {
  //  模块热替换
  hot: true,
  // 设置端口号
  port: 9000,
  // 是否自动打开浏览器
  open: true,
  // 启动gzip压缩
  compress: true,
  // host配置
  host: '0.0.0.0'
},

7. proxy配置

 // 配置服务
  devServer: {
    static: {
      // 指定路径
      directory: path.join(__dirname, 'public')
    },
    //  模块热替换
    hot: true,
    // 启动gzip压缩,传输速率会变快
    compress: true,
    // 自动打开浏览器
    open: true,
    // 设置主机地址，默认是localhost，如果希望其他地方也可以访问，可以设置为 '0.0.0.0'
    // 其他地方访问：通过你电脑的ip地址加上端口来访问的
    // host: '0.0.0.0',
    // 设置端口号
    port: 9000,
    // 配置代理，解决代理问题
    proxy: {
      // 当遇到'/api'的时候
      '/api': {
        // 将目前的地址代理至target
        target: 'http://localhost:8888',
        // 将'/api' 重写为''
        pathRewrite: {
          '^/api': ''
        },
        // 设置允许访问https的服务器
        secure: false,
        // 在某些情况下会很有用
        changeOrigin: true
      }
    },
    // 设置为true时，路由跳转如果返回了404错误，会自动返回index.html的内容
    historyApiFallback: true
    // 也可以设置成一个对象，根据from来匹配路径，决定跳转到哪个页面
    // historyApiFallback: {
    //   rewrites: [
    //     { from: /^\/$/, to: '/views/landing.html' },
    //     { from: /^\/subpage/, to: '/views/subpage.html' },
    //     { from: /./, to: '/views/404.html' },
    //   ],
    // },
  },

三、如何区分开发环境 ：优化

优化：把开发环境和生产环境所需的各个配置分离！！！！！！

1. 在根目录创建config文件夹，并创建几个文件

2. 修改package.json中的配置

可以进行配置执行的文件

build : 打包的时候，加载生产环境所需配置

serve : 开发的时候，加载开发环境所需配置

"scripts": {
   "build": "webpack --config ./config/webpack.prod.config.js", 
   "serve": "webpack serve --config ./config/webpack.dev.config.js"
},

3. webpack.comm.config.js配置

const path = require('path'); // Node内置模块

// 插件的导入方式可能不同，具体查看文档哦
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 结构出来
const { DefinePlugin } = require('webpack');

module.exports = {
  // 因为当前代码环境跑在web上，进行配置一下
  target: 'web',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, '../dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'js/boundle.js' // 打包后的js的文件名
  },
  // 模块解析
  resolve: {
    // 这些后缀名不用写
    extensions: ['.js', '.json', '.vue', '.css'],
    // 配置别名
    alias: {
      '@': path.resolve(__dirname, '../src'),
      commonImg: path.resolve(__dirname, '../src/img')
      // ...
    }
  },
  // 配置模块
  module: {
    // 规则
    rules: [
      // css|less文件
      {
        test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      },
      // 图片
      {
        test: /\.(png|jpe?g|gif|svg)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的图片
        // 自动选择
        type: 'asset',
        parser: {
          // 数据url的条件配置
          dataUrlCondition: {
            // 超过100kb的图片打包，小于的弄成bast64
            maxSize: 10 * 1024
          }
        },
        // 生成
        generator: {
          filename: 'img/[name]__[hash:8][ext]'
        }
      },
      // 字体文件
      {
        test: /\.(eot|ttf|woff2?)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的字体文件
        type: 'asset/resource',
        // 生成
        generator: {
          filename: 'font/[name]__[hash:8][ext]'
        }
      },
      // js文件
      {
        test: /\.js$/,
        use: ['babel-loader']
      }
    ]
  },
  // 配置插件,放置着一个个的插件对象
  plugins: [
    // 生成index.html文件，并使用模版
    new HtmlWebpackPlugin({
      // 指定模版路径
      template: './public/index.html',
      // 顺便定义一下title
      title: '超级无敌巨帅小流星'
    }),
    // 定义变量
    new DefinePlugin({
      // 这里需注意  如果只有一层引号，那么内部会去找这个变量，所以如果要写字符串的话，里面再套一层，望周知
      BASE_URL: '"./"'
    })
    // new VueLoaderPlugin()
  ]
};

4. webpack-merge

因为不管是生产环境，还是开发环境，都需要公共的部分，所以需要合并，合并需要一个插件

npm install webpack-merge -D

5. webpack.dev.config.js配置

const path = require('path'); // Node内置模块
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.comm.config');
// 合并
module.exports = merge(commonConfig, {
  // 设置模式
  mode: 'development',
  // 设置source-map,建立js映射文件，方便调试代码和错误
  devtool: 'source-map',
  // 配置服务
  devServer: {
    static: {
      // 指定路径
      directory: path.join(__dirname, './public')
    },
    //  模块热替换
    hot: true,
    // 启动gzip压缩,传输速率会变快
    compress: true,
    // 自动打开浏览器
    open: true,
    // 设置主机地址，默认是localhost，如果希望其他地方也可以访问，可以设置为 '0.0.0.0'
    // host: '0.0.0.0',
    // 设置端口号
    port: 9000,
    // 配置代理，解决代理问题
    proxy: {
      // 当遇到'/api'的时候
      '/api': {
        // 将目前的地址代理至target
        target: 'http://localhost:8888',
        // 将'/api' 重写为''
        pathRewrite: {
          '^/api': ''
        },
        secure: false,
        // 在某些情况下会很有用
        changeOrigin: true
      }
    },
    // 设置为true时，路由跳转如果返回了404错误，会自动返回index.html的内容
    historyApiFallback: true
  }
});

6. webpack.prod.config.js配置 

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.comm.config');
// 合并
module.exports = merge(commonConfig, {
  // 设置模式
  mode: 'production',
  plugins: [
    // 自动清空dist文件夹并重新生成
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      // 匹配你要复制的文件
      patterns: [
        {
          // 入口
          from: './public',
          to: './public',
          globOptions: {
            // 忽略的文件
            ignore: [
              // public文件夹下所有的index.html文件都被忽略，不复制
              '**/index.html'
            ]
          }
        }
      ]
    })
  ]
});
玄鱼殇
关注
  • 14
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
webpack本地开发环境无法用IP访问的解决方法
11-28
在进行Web应用开发时，我们通常会使用诸如webpack这样的构建工具来搭建本地开发环境。然而，在实际工作中，可能会遇到一个问题，即本地开发环境只能通过`http://localhost:8080`来访问，而不能使用`http://本机IP:...
Tomcat搭建本地服务器的图文教程
01-11
办法有很多，诸如PHPnow，WampServer都可以，本文重点介绍如何使用Tomcat搭建本地服务器。 什么是Tomcat？ Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器，在中小型系统和并发访问...
Webpack搭建本地服务器
Welisit的博客
11-01 368
查看效果这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成编译和展示；
Webpack实用工具之webpack-server
weixin_43796428的博客
02-09 2342
前面我们学习了使用webpack来对项目进行管理，但是每当我们修改JS代码后如果需要得到实时效果，就需要在修改后去运行webpack脚本命令，很是繁琐并且重复；现在我们隆重的请出webpack-server来帮我解决这个问题
推荐使用Webpack Serve：一键启动的开发服务器
最新发布
gitblog_00021的博客
06-03 393
推荐使用Webpack Serve：一键启动的开发服务器 项目地址:https://gitcode.com/unfold/webpack-serve Webpack Serve是一个强大的基于Webpack的开发服务器，它集成了热模块替换和错误覆盖层，为你提供与create-react-app类似的无缝开发体验。只需几行命令，你就可以快速启动一个包含实时重载功能的本地开发环境。 安装与使用 安装W...
webpack的基本使用
m0_63400611的博客
04-25 322
webpack 概念: webpack是前端项目工程化的具体解决方案 主要功能: 提供前端模块化开发支持,代码压缩混淆,处理浏览器端JavaScript的兼容性,性能优化等强大功能 好处: 可以把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性 注意: 目前Vue, React等前端项目,基本都是基于webpack进行工程化开发的 创建列表隔行变色项目 在项目路径的终端运行命令: npm i jquery -S (-S 代表将安装的这个包记录到dependencies节点
webpack-dev-server 配置以及webpack教程
weixin_40254430的博客
02-09 4104
webpack是什么? 一开始我也不理解? 看了许多文档都是在扯淡，摞了一大堆,点子却没说到。当然我说的可能也不对，希望诸位取其精华，去其糟粕。 因为包括官方文档，虽然翻译说的是人话，但是你却找不出一点点有用的有效的信息。 至于其他人的就是罗里吧嗦一大堆。写这个，就是想说，这玩意其实很简单。包括在php上，就是php的blade指令。不过php是直接略过了。压根没当回事。是因为什么被搞复杂了。是因为每个人的思维不透明。才造成交流沟通的困难。我这里写这个就是希望可以帮助到大家。 webpack其实就两个关.
webpack dev-server 配置
EmotionComputer
08-29 6550
webpack dev-server
09_webpack服务器和VueCLI1
08-03
首先，让我们了解为什么需要搭建本地服务器。在常规开发流程中，我们需要先执行`npm run build`来编译代码，然后通过live server或直接打开浏览器查看效果。这种反复切换的操作降低了开发效率。为了解决这个问题，...
webpack打包Ts简易搭建
06-29
Webpack 是一个流行的模块打包工具，...通过以上步骤，你就可以在本地环境中搭建一个使用Webpack和TypeScript的简单项目。了解每个部分的作用和配置是提高开发效率的关键，同时也能更好地理解和利用这两个强大的工具。
从零开始搭建webpack+react开发环境的详细步骤
12-10
【从零开始搭建webpack+react开发环境的详细步骤】 在开始搭建webpack+react开发环境之前，首先需要了解一些基础概念。Webpack是一个模块打包工具，它将JavaScript、CSS、图片等资源视为模块，通过配置和使用各种...
webpack5 学习（八）—— 开发环境
且听风吟的博客
03-03 844
webpack学习：开发环境配置
15.利用webpack搭建server本地服务
weixin_51614564的博客
06-27 755
1.每次修改了一点点的源代码，都会对原来的代码重新做一次打包，有了最新的一个内容，然后通过liveSever搭建一个本地服务，在我们浏览器里面打开把它运行起来。但是这整个过程经常操作会影响我们的开发效率。我们现在想一旦修改源代码以后，webpack自动做一个编译，新的代码立马反应到浏览器上面。webpack给我们提供了watch模式：如何开启watch呢？两种方式： webpack-dev-server上面的方式可以监听到文件的变化，但是事实上它本身没有自动刷新浏览器的功能的，安装webpack-dev-s
webpack serve 正常启动但没效果
goodman2980的博客
08-08 1330
安装完 webpack-dev-server 后 配置webpack.config.js。然后 npm run dev，服务器正常启动，且保存修改index.js有反应。但是打开网页却发现js的修改对网页没有效果。在package.json中配置。
webpack快速入门-开发服务器(webpack-dev-server)
温情
09-05 524
在开发阶段，遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：编写代码控制台运行命令完成打包打开页面查看效果并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境为了解决这些问题，webpack它既不是plugin也不是loader接下来看看它怎么用。
安装与配置webpack-dev-serve
m0_66504310的博客
11-27 5318
安装与配置插件 webpack-dev-serve
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值