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 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。 Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。 这
原创
2022-07-07 10:45:41
386阅读
初始化：npm init -y安装webpacknpm install webpack webpack-cli --save-dev安装vuenpm i --save-dev vue vue-loader vue-template-compiler 安装css的插件npm install --save-dev style-loader css-loader...
原创
2021-07-05 13:48:48
481阅读
我假设你环境已经安装好了：webpack默认是不支持打包css(style)的需要安装 npm install css-loadle.css')
原创
2022-07-25 16:42:31
246阅读
npm npm i -D style-loader css.loader webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loade ...
转载
2021-09-09 10:37:00
268阅读
2评论
文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1
原创
2022-05-10 10:26:25
1407阅读
点赞
（1）预备备① webpack3.8.1 安装 详见：http://blog.csdn.net/fanfan4569/article/detailsvar ExtractTextPlugin = req...
原创
2022-10-21 16:20:27
790阅读
之前一篇随笔写到vue多环境打包环境配置：https://www.cnblogs.com/shun1015/p/13411636.html 1.区分vue脚手架版本，版本不同，项目结构不同，多环境变量配置方式不同 package.json文件里 scripts对象上配置打包命令 2.打包后的代码如何 ...
转载
2021-08-10 10:41:00
640阅读
2评论
在webpack中配置.vue组件页面的解析(vue-loader) 结合webpack使用vue-router 在webpack中配置.vue组件页面的解析 1、运行npm i vue -S将vue安装为运行依赖；2、运cnpm i vue-loader vue-template-compiler Read More
转载
2019-05-02 18:18:00
756阅读
QQ 1285575001Wechat M010527技术交流 QQ群599020441纪年科技aming前端构建工具前端资源编译打包输出 js csswebpack 配置有毒vue 源码资源打包开发webpack 配置解析从入口看 dev webpack如何编译path node.js 开放API...
原创
2021-07-18 20:58:37
704阅读
一、vue单文件组件开发流程（webpack打包）1）源文件目录结构2）package.json3）webpack.config.js HTML Webpack Plugin依据html模板生成一个自动引用你打包后的文件（js或css）的新的html页面，新文件默认名称为index.html。 运行.vue文件，需要依赖vue、vue-loader、vue-template-compiler这
转载
2024-08-17 12:28:24
48阅读
打包
原创
2023-12-05 10:26:51
66阅读
vue打包报错ERROR in static/js/vendor.0bab1cca7597d53f5cb2.js from UglifyJs
Unexpected token: punc (() [./~/_vue-fancybox@1.0.3@vue-fancybox/src/fancyBox.js:7,0][static/js/vendor.0bab1cca7597d53f5cb2.js:17
转载
2021-05-10 17:19:28
1209阅读
2评论
之前一直用的脚手架，这次自己搭建webpack前端项目，花费了不少心思，于是做个总结。WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。1.用法项目结构如下：project
|- bulid &l
转载
2024-07-25 07:29:59
30阅读
1、安装 2、项目目录： index文件夹下的index.css： index文件夹下的index2.css： index文件夹下的index-less.less： index文件夹下的index.js： login文件夹下的index.js： login文件夹下的login.css： 3、webp
转载
2017-09-20 15:44:00
248阅读
2评论
1. 写在前面在前面的博客中，对webpack打包项目进行了简单介绍，而且都是关于打包编译 「.js」 文件的介绍。我们知道在一个基于webpack的项目中，肯定不止是 「.js」 文件，还有 「.html」 、「.css」、「.png」 等文件，在后面的博客中会给大家一一讲述，在这篇博客中，我们就介绍如何使用webpack打包编译 「.css」 文件。主要内容包括：如何在项目中引入 「.css」
原创
2021-05-19 13:14:35
1912阅读
最新打包vue cli 4.5 项目时，体积尽然达到了9M，页面访问的速度，因此进行尝试进行优化，最终压缩到 968k ，效果明显。下面是优化方法。首先新建文件'vue.config.js'，放在项目根目录下，与package.json在同一级目录下1.BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前&nb
转载
2023-10-12 21:09:44
165阅读
最新打包vue cli 4.5 项目时，体积尽然达到了9M，页面访问的速度，因此进行尝试进行优化，最终压缩到 968k ，效果明显。下面是优化方法。首先新建文件'vue.config.js'，放在项目根目录下，与package.json在同一级目录下1.BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前&nb
转载
2023-11-22 07:03:28
139阅读
目录
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阅读
