webpack生产环境-js压缩

js压缩

1,创建文件
在这里插入图片描述
2,修改webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'
};

在这里插入图片描述

3,运行指令 webpack

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack-dev-server 是一个用于开发环境的轻量级服务器,它与 webpack 模块打包工具结合使用,提供了实时重新加载(live reloading)和热模块替换(hot module replacement)等功能,使得在开发过程中可以快速地预览和调试应用程序。 通过 webpack-dev-server,你可以在本地启动一个服务器,并且监听指定的端口。当你修改了源代码文件时,webpack-dev-server 会自动重新编译并刷新浏览器,使你能够即时看到修改后的效果。同时,它还支持热模块替换,即在不刷新整个页面的情况下,只替换发生改变的模块,从而提高开发效率。 要使用 webpack-dev-server,你需要先安装 webpackwebpack-dev-server: ``` npm install webpack webpack-dev-server --save-dev ``` 然后,在 webpack 配置文件中配置 devServer 选项: ```javascript module.exports = { // ...其他配置项 devServer: { contentBase: path.join(__dirname, 'dist'), // 设置服务器从哪个目录提供内容 compress: true, // 启用 gzip 压缩 port: 9000, // 指定服务器监听的端口号 }, }; ``` 最后,在 package.json 文件中添加一个脚本命令以启动 webpack-dev-server: ```json { "scripts": { "start": "webpack-dev-server --open" } } ``` 通过运行 `npm start` 命令,就可以启动 webpack-dev-server,并在浏览器中打开应用程序。每次修改源代码后,都会自动重新编译并刷新页面。这样,你就可以方便地进行开发调试了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值