但是npm run 命令时出错： no such file or directory, scandir ‘/app/admin/node_modules/node-sass/vendor’
之前的一个 uni-app 项目，为了方便管理和自动化部署，准备采用 vue-cli 和 webpack 进行部署，遇到了一些问题，记录一下：
最近接手了一个有点历史的小程序，用 uni-app 开发的，没有装 css 预处理器，开发效率有点低，装好之后控制台报错了：
所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~
0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。webpack4不再强制需要webpack.config.js作为打包的入口配置文件，默认的入口为./src/和默认的出口./dist,小项目的福音。
众所周知，node-sass 是一个非常棒的工具，是前端工程师组织 CSS 的一个神兵利器。然而，用过的朋友都知道，node-sass 是让人既爱又恨！你爱它，因为它赋能了 CSS 工程化；你恨它，因为有时候你搞不懂它为什么又出差错了。我最近就在生产环境新踩了两次 node-sass 的坑，这让我下定决心放弃 node-sass。
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要(依赖)的每个模块(modules)，然后将所有这些模块打包成一个或多个 assets。
在第三步的时候我并没有在package.json中找到webpack配置项，就跳过继续第四步，结果没解决
@toc 报错信息 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected selector. ╷ 48 │ } │ ^ ╵ src\view\settlein\index.vue 48:2 root stylesheet 报错的代码 /deep/ .van-field { border-radius: 5px; } 报错原因 scss不支持这个选择
最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。
dev对应的就是我们服务启动的命令,配置完成后我们就可以通过npm run dev来启动了
实现Webpack的打包最基本的就是配置好入口、出口，npm install webpack后在根目录创建webpack.config.js,代码如下：
Web前端的组件技术刷新真的是日新月异，前段时间看到很多童鞋分享了webpack的使用，刚好之前做我们游戏里Web版的GM工具的时候正在想怎么用简单的方式，做模块分离并且又不需要引入重量级的第三方库或组件，也不需要太繁琐的流程（毕竟只是个小工具）。
本项目使用vue/cli-4构建，在安装完less-loader后，npm run serve 时候报错，原因是webpack版本冲突
webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk。最好Webpack会把所有Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。
一、前端构建工具 grunt gulp webpack(主流,https://webpack.js.org/) Fis3（百度） 二、webpack是什么 webpack 是一个现代 JavaScript 应用程序的静态模块打包器 webpack稳定版本：v4.44 三、如何使用webpack搭建前端环境 安装node.js( v12.x) 注意：如果npm安装一些包由于网速原因，安装慢切换一下镜像源 改成淘宝镜像： npm config set registry https://registry.np
在上篇中，解决了webpack4关于多页面及分离第三方库js和共用自定义库js的配置，本篇将以此为基础继续配置css引入、分离等功能。
webpack 使用流程 1.创建文件目录 + direaction - dist - src + css + js + images + index.html + main.js 2.初始化项目 1 npm init -y | 文件目录 + direaction - dist - src + css + js + images +
这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader，（也可以使用cnpm安装）
为了方便也可以这么写，使用 npm run 命令这个命令执行的时候默认会把 node_modules 的.bin 文件放到全局上，执行之后销毁npm run buildnpm run dev
由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。
通常我们会使用vue-cli来创建一个vue项目，由于vue-cli对常见的开发需求进行了预先配置，做到了开箱即用。但是阻碍碍我们窥探其真面目脚步。当然官方也提供了手动配置的方案。参考
需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错
欢迎参加腾讯云 Cloud Studio 实战训练营！在本次训练营中，我们将通过沉浸式体验，带您一步步编写一个基于 Nuxt.js 的静态博客系统。无论您是初学者还是有一定编程经验的开发者，本训练营都将为您提供一个深入了解和掌握 Nuxt.js 技术以及静态网站开发的机会。
小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli，用 webpack4 一步步搭建 vue 项目。
本篇博客将通过使用Nuxt 框架开发一个博客系统为线索,一步步的讲解Cloud Studio 的使用以及其强大的优势
新增App.vue文件,使用IDEA新建,如果没有的话在Setting->plugin中安装vue插件
在前面的篇章中，已经说明了 webpack4 的基本使用，那么本章节开始在 webpack4 中构建vue项目，同时对比看看这种构建方式，与在网页script导入 vue.js 中的区别。
删除 package.json 中的 react-dev-inspector ，从新 yarn 一下：
webpack5构建vue 必要环境 安装ndejs 我们需要安装node 如果没有安装则安装 安装过则跳过 下载安装nodejs 执行 node -v npm -v [在这里插入图片描述] 初始化项目文件夹 新建一个空的项目 执行 npm init -y 初始化 npm init -y 会生成一个package.json [在这里插入图片描述] 安装webpack以及 html-webpack-plugin 控制台执行 npm i webpack webpack-cli webpack-dev-serv
Loader就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。 以处理SCSS文件为例：
本文节选自吴浩麟的《深入浅出 Webpack》。 Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。 以处理 SCSS 文件为例： SCS
在过去的一年和一些人中，我一直在与 Creative Tim 合作。 我一直在使用 create-react-app 来开发一些不错的产品。 有很多客户询问如何在 Webpack 上迁移我们的产品模板。
webpack简介 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 webpack特点 Webpack 有两种组织模块依赖的方
之前的 webpack 命令加前缀（如："webpack:build"），继续可用
webpack简介 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 webpack特点 Webpack 有两种组织模块
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
⼤家⼀开始使⽤ npm 安装依赖包时，肯定感受过那挤⽛膏般的下载速度，上⽹⼀查只需要将 npm 源设 置为淘宝镜像源就⾏，在控制台执⾏⼀下以下命令： npm config set registry https://registry.npm.taobao.org
webpack是一个 模块打包工具，支持所有的打包语法，比如 ES Module、CommonJS、CMD、AMD。初期的webpack是用来模块打包js的，发展到现在，已经可以打包很多种文件类型，比如 css、img 。
越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~
本文由 IMWeb 团队成员 eden 首发于腾讯内部 KM 论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 前言 随着前端构架工具的不断发展，提供了很多提高我们的开发体验和开发效率的能力，同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员，早期的 webpack 配置复杂难懂，随着其发展，相关配置也不断简化，性能也不断提高，但是对于深入使用的开发人员，通常它的默认配置并不适用于业务开发，需要针对自己业务调整适配。 你对 webpack 了解多少？如何针对业务
之前我们大多都是用Vue-Cli来创建项目，但是Vue-Cli已经停止更新了，并且Vue-Cli相当于一堆插件的集合体，我们想替换以下，或者想根据我们的项目优化以下，提升编译的性能，这时候可以自己用Webpack来配置项目。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
