（1）预备备① webpack3.8.1 安装 详见：http://blog.csdn.net/fanfan4569/article/detailsvar ExtractTextPlugin = req...
原创
2022-10-21 16:20:27
790阅读
背景最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。 CommonsChunkPluginmodule.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPa
转载
2021-04-12 15:11:00
1838阅读
2评论
提取css文件成单独文件： 1、下载插件：npm install mini-css-extract-plugin -D 2、使用插件：webpack.config.js ①module中使用loader时用 MiniCssExtractPlugin.loader 替代 style-loader ②p
原创
2021-07-13 16:13:32
262阅读
1.新建一个webpack.config.js2.配置入口entry（所需打包的文件路径）3.配置出口output（1）path 指的是文件打包后的存放路径（2）path.resolve（）方法将路径或者路径片段的序列号处理成绝对路径（3）__dirname表示当前文件所在的目录的绝对路径（4）filename是打包后文件的名称...
原创
2022-01-16 10:32:00
663阅读
1.新建一个webpack.config.js2.配置入口entry（所需打包的文件路径）3.配置出口output（1）path 指的是文件打包后的存放路径（2）path.resolve（）方法将路径或者路径片段的序列号处理成绝对路径（3）__dirname表示当前文件所在的目录的绝对路径（4）filename是打包后文件的名称...
原创
2021-09-03 14:55:33
903阅读
目录
webpack介绍
前端模块化和打包概念介绍
webpack和grunt/gulp的对比
webpack和nodejs的关系
webpack安装
webpack使用示例
环境搭建
使用webpack打包
使用打包后的js文件
入口和出口
局部安装webpack
package.json中定义启动
实践定义： 引用： 因为CommonJS规范的代码浏览器是不认识的，所以需要借助web
原创
2022-01-19 14:56:12
179阅读
目录webpack介绍前端模块化和打包概念介绍webpack和grunt/gulp的对比webpack和nodejs的关系webpack安装webpack使用示例环境搭建使用webpack打包使用打包后的js文件入口和出口局部安装webpackpackage.json中定义启动实践定义：引用：因为CommonJS规范的代码浏览器是不认识的，所以需要借助webpack对上述代码进行转换：查看结果：代码内容：在index.html中引用：
原创
2021-07-05 13:48:41
437阅读
webpack代码压缩 js压缩 css压缩 html压缩 js压缩 webpack4内置了uglifyjs-webpack-plugin,在生产模式默认开启这个插件 所以我们默认打包的js文件以及是压缩过的 当然我们也可以手动安装一下这个插件并且手动设置一个参数 去做一些并行压缩之类的事情 css ...
转载
2021-09-24 00:33:00
1505阅读
2评论
webpack4 单独抽离打包 css 的新实现 前言 之前我们使用的打包 css 无非两种方式：① 将 css 代码打包进 入口 js 文件中；② 使用第三方插件(extract text webpack plugin)实现【注意，该插件在 webpack4 中已经不推荐使用，而且会出现各种莫名其
转载
2019-01-12 15:59:00
313阅读
2评论
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这
原创
2024-05-08 11:43:02
163阅读
什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
Webpack安装
全局安装
npm install webpack -g
npm install webpack‐cli -g
安装后查看
原创
2021-07-02 11:42:51
693阅读
什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，
原创
2022-01-19 11:10:25
88阅读
server { listen 80; server_name yuying-api.xutongbao.top; #配置根目录 location / { proxy_pass http://127.0.0.1:85; } access_log logs/access_yuyingapi.log;
原创
2024-04-29 10:21:00
116阅读
Vue.js - webpack相关配置注意：有时候使用npm i node-sass -D装不上，这时候，
原创
2023-07-12 22:03:43
163阅读
配置 webpack.production.config.js开发环境下，可以不用考虑系统的性能，更多考虑的是如何增加开发效率。而发布系统时，就需要考虑发布之后的系统的性能，包括加载速度、缓存等。下面介绍发布用配置代码和开发用的不一样的地方。发布到 ./build 文件夹中path: __dirname + "/build",vendor将第三方依赖单独打包。即将 node_modules 文件夹
原创
2023-11-26 19:14:19
114阅读
cnpm install webpack@^5.23.0 --save-dev cnpm i webpack-cli@^4.5.0 --save-dev cnpm i less-loader@6.0.0 --save-dev cnpm i style-loader --save-dev cnpm i
转载
2021-07-07 11:01:00
174阅读
2评论
1、编写src/css/main.css#app a{ display: inline-block; width: 150px; line-height: 30px; background-color: dodgerblue; col...
原创
2023-07-17 14:22:54
72阅读
前言 上一篇文章我们使用webpack打包成功了，但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址，非常麻烦，所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创建一个js文件webpack.config，当期我们配置最简单的导入导出，代码如下： const p
原创
2021-07-13 11:08:53
2487阅读
