webpack的使用（1）

最新推荐文章于 2024-07-29 19:55:09 发布
最新推荐文章于 2024-07-29 19:55:09 发布
阅读量241 收藏
点赞数
分类专栏： 前端自动化 js 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xindy2011/article/details/51803671
版权

webpack除了打包之外也可以压缩代码，压缩图片，增加版本号，base64位等，今天我们就来说说webpack。
webpack的安装
npm install webpack -g
如果想写入package.json
npm install webpack –save-dev
然后在package.json相同的目录下面写入webpack.config.js
webpack中写入配置
这里推荐先看下阮一峰的github
https://github.com/ruanyf/webpack-demos#demo01-entry-file-source
在这里能先学习一些基础的知识，然后配合来写复杂的打包和压缩等。
运行就是在本目录下webpack。
稍后我会把我使用的配置写出来并配上解释。

xindy2011
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack的基础使用（二）
sika-master的博客
02-11 355
需求分析1： 在使用webpac打包的时候，只要修改了一点点代码就需要自己手动在重新打包，非常麻烦。 能否进行自动打包，只要修改代码，程序就自动打包？ 自动打包的插件 下载、使用： 下载： npm install webpack-dev-server -D 修改 package.json -> scripts 中的 dev 命令如下： "scripts": { "dev": "webpack-dev-server" }, 将 src -> index.html 中，script 脚
webpack 基础详解(1)
s_y_f_的博客
06-08 324
什么是webpack? webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 为什么要使用webpack? webpack可以根据模板生成HTML，并自动处理上面的css/js引用路径。 webpack可以自动处理里面的图片路径，css里面背景图的路径，字体引用 webpack可以开启本地服务器，一边改写代码，一边自动更新页面内容 webpa
Webpack的简单使用
qq_51447436的博客
03-29 5689
Webpack的简单使用
Webpack基础使用
2201_75702085的博客
12-24 1269
Webpack是一个静态模块打包工具。
webpack使用
woyaoshengzhang的博客
04-15 909
1. 安装webpack，webpack-cli 只安装webpack，运行webpack -v 提醒我需要安装webpack-cli sudo cnpm install webpack -g sudo cnpm install webpack-cli -g webpack -v # webpack: 5.72.0 webpack-cli: 4.9.2
webpack使用Vue学习案例
08-25
1. **安装依赖**：首先，确保Node.js已经安装，然后通过npm（Node包管理器）安装Vue CLI和Webpack。Vue CLI会自动配置Webpack，但为了更深入理解，我们也可以手动配置。 2. **初始化项目**：使用Vue CLI创建一个新...
webpack使用方法说明
11-18
webpack使用方法说明
webpack使用ParallelUglifyPlugin实例
04-17
webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例
Webpack使用指南.pdf
05-15
帮助前端程序实现模块的依赖打包，压缩代码，优化代码；主要运用于前端框架，比如vue，react等。优点代码压缩，代码合并，使用精灵图减少请求次数，减少cookie的发送，css前置、js后置，使用浏览器缓存静态资源
webpack使用DllPlugin实例
04-17
1. 配置`webpack_dll.config.js`，指定要预构建的模块。 2. 运行Webpack，使用DllPlugin和这个配置文件生成DLL。 3. 在`webpack.config.js`中添加DllReferencePlugin，引用生成的DLLmanifest文件，使Webpack在主构建...
Cannot find module ‘html-webpack-plugin
qq_43071699的博客
07-26 435
安装。在Webpack配置文件中正确引用。清除缓存并重新安装依赖（如果需要）。确保Webpack版本与兼容。检查文件。按照这些步骤操作，你应该能够解决的问题。如果问题仍然存在，请提供更多信息，以便进一步诊断。
vue里给img的src绑定数据失效
最新发布
Zwwxd666的博客
07-29 299
在v-for遍历数据时想要通过给img的src单向绑定 图片路径时出现问题。上网查说是webpack构建时识别不到，直接不单绑数据，写死试试看。直接require导入图像文件模块。
webpack性能优化
闻人放歌的三寸青草园圃
07-27 867
babel7.4之后弃用babel-polyfill，推荐直接使用corejs和regenerator。在webpack5中，使用thread-loader替代happypack。所以需要使用regenerator这个库来支持generator语法。实际在我们开发环境中都是使用devServer，其中已经默认设置。DllReferencePlugin - 使用dll文件。同一个版本只构建一次即可，不用每次都重新构建。前端框架vue react，体积大，构建慢。DllPlugin - 打包出dll文件。
【Ant Design Pro】快速上手
小秀的博客
07-25 515
插件都需要兼容 umi4 才能用，插件 api 有变化，没兼容的是用不了的。也减少了 webpack 升级导致的问题。app.tsx 是项目全局入口文件（在首次访问页面执行 / 刷新页面），定义了整个项目使用的公共数据，getInitialState 方法定义了项目初始化需要执行的操作。这里 start 模式使用了前端项目内的 mock 数据，而 start:dev 没有使用mock 数据，需要真实的后端接口。这是最新版的 umi，不同于上个版本，上一个版本应该是 透传的 umi-request。
create-vue项目的README中文版
计算机图形学
07-29 173
创建基于vite的vue项目的推荐方法。
postMessage 收到消息类型 “webpackWarnings“
qq_43225508的博客
07-26 909
当A系统中的parent页面使用iframe内嵌C系统的child页面，并且在parent页面中通过postMessageg给child页面发送消息时，如果C系统中使用了webpack,则webpack也会给child页面发送消息 ，消息类型为webpackWarnings。// 因为webpack 发送的数据是对象类型，parent 页面发送的是经过JSON.stringify转换的字符串类型的。// 过滤来自webpack发送的possMessage 消息。// 处理来自parent 页面的数据。
记一次老旧项目的整体技术升级
醒途
07-26 358
最近给公司采购的老旧的node8vue2.6webpack3npm项目做构建优化背景：整个项目build一次20+ min，本地冷启动和热更新也忒慢，依赖npm i一下也得装个20+ min众所周知，Node 版本依赖包管理工具和构建工具的升级都能对构建速度的优化有帮助。
ueditor跨域问题解决
m0_50217592的博客
07-26 363
去掉但是webpack跨域仍然没有用，怀疑是ueditor组件内部不是ajax请求，导致内部存在跨域问题，webpack对ueditor组件没有效果，可以通过下面效果图能够发现。问题：1.在引用vue-ueditor-wrap后，上传图片和附件出现跨域问题，前端引用了webpack去解决跨域问题，但仍然存在跨域问题？发现请求是前端直连后端引用，导致没有经过ng和前端webpack的跨域问题，之前觉得是前端解决了跨域问题，导致一直没定位到问题。2.后面是如何去解决ueditor跨域问题的？
【无标题】
lwl12345678_的博客
07-25 195
总结下最近用到的一些技术点。
webpack使用教程
07-28
Webpack是一个现代化的JavaScript模块打包工具。它能够将多个模块打包成单个文件，以便在浏览器中加载。以下是一个简单的Webpack使用教程： 1. 安装Webpack：首先，你需要在你的项目中安装Webpack。你可以使用npm或yarn来安装Webpack。在命令行中运行以下命令来进行安装： ``` npm install webpack webpack-cli --save-dev ``` 2. 创建配置文件：在项目根目录下创建一个名为 `webpack.config.js` 的文件。在这个文件中，你可以配置Webpack的各种选项，例如入口文件、输出路径、加载器和插件等。 ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, // 添加其他加载器和规则 ] }, // 添加插件和其他配置 }; ``` 3. 创建入口文件：在项目中创建一个名为 `index.js` 的入口文件。这个文件是Webpack打包的起点。 4. 配置加载器：Webpack使用加载器来处理不同类型的文件。例如，Babel加载器可以将ES6语法转换为ES5语法，使其能够在旧版浏览器中运行。在上面的配置文件中，我们使用了 `babel-loader` 来处理JavaScript文件。 ``` npm install babel-loader @babel/core @babel/preset-env --save-dev ``` 然后，在配置文件中添加以下规则： ```javascript module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, // 添加其他加载器和规则 ] } ``` 5. 运行Webpack：在命令行中运行以下命令来打包你的项目： ``` npx webpack ``` 这将根据配置文件中的设置，将入口文件及其依赖打包成一个或多个文件，并将它们输出到指定的路径。 这只是一个简单的Webpack使用教程，Webpack还有很多其他功能和配置选项。你可以参考Webpack的官方文档来了解更多详细信息和高级用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值