在讲解提取css之前，我们先看下项目的架构如下结构：### 目录结构如下：
demo1 # 工程名
| |--- dist # 打包后生成的目录文件
| |--- node_modules # 所有的依赖包
| |--- app
| | |---index
| | | |-- views # 存放所有vue页面文件
| | | | |-- index.vue
|...
随着项目的页面越来越多体积越来越大，dev构建速度和pro打包速度越来越慢，然后就抽时间对项目进行了webpack升级来提升一下速度
升级过程中遇到了很多的坑，基本都是plugin和loader升级后的一些用法问题，花了一个晚上和一个上午时间，过程很痛苦，但是看到
速度的大幅度提示，还是很开心的
先上图看一下对比效果
webpack3 dev构建
webpack3 pro打包
webpack5 dev构建 提升60%
webpack5 pro 构建 提升23%
看的处理效果还是很不错的...
安装Webpack1. npm i -D 是npm install --save-dev 的简写，是指安装模块并保存到package.json的devDe pendencies，npm i -D webpacknpm init -ynpm install webpack webpack-dev-server --save-devnpm install --save-dev webpack-cli -g2.全局安装 npm i -g webpack运行在项目根目录下对应的命令行里通过node rnodules/.bin/webpack 运行Webpack 的可执行文件。在Npm Script 里定义的任务会优先使用本项目下的Webpack创建src 文件...
文档地址 http://webpack.github.io/docs/usage.html首先全局安装webpack(我这里使用的是淘宝的cnpm)cnpm install webpack检查一下是否安装完毕，查看版本号webpack -h简历package.json文件npm init 一直enter就可以了然后再本地安装一次webpackcnpm install webpack --save-dev新建webpack.config.jsmodule.exports = {entry: ‘./js/app.js‘, //入口文件output: {path: ‘./build‘, //打包好的文件夹filename: ‘main‘ /...
前言前面我们已经搭建了基础环境，现在将开发环境更完善一些。devtool在开发的过程，我们会经常调试，so，为了方便我们在chrome中调试源代码，需要更改webpack.config.js，然后启动webpack-dev-server。完成之后在chrome浏览器中打开debug，点击Sources选项，即可看见提示，继而输入你想查看的源文件名即可显示该文件源代码，如果你觉得某处代码有问题，对应行号打上断点即可调试。......
module.exports = {devtool: ‘cheap-modu...
vue打包的时候npm run build报错ERROR in [copy-webpack-plugin] unable to locate "D:/xxx/xxx/xxx"这表示这个路径出现了错误，找不到正确路径在你的项目文件夹中找一找有没有这个路径的文件，没有的话，按这个路径把缺失的相应的文件放到里面再重新打包就行了例如我打包一直报错ERROR in [copy-webpack-plugin] unable to locate ‘D:\trainh5vue\Content‘ at ‘D:\trainh5vue\Content‘找了找发现有两样式文件一直没有打包进去...
webpack通过逆注入的形式来构建应用，页面正常的流程是先解析html然后在解析内部的资源(js, css, img等)。webpack是以配置项entry内的资源为入口。webpack在编译时，正常情况下，会先对entry中的资源进行编译处理，然后再执行插件，最后执行loader。但是entry的属性值在特定目录时，webpack不会对其编译。相当于js中的保留关键字。目前测试下来的特定目录为:[‘./src/**/*‘, ‘./test/**/*‘]如图：webpack并未先编译./test/aaa.j...
组件复用
当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created只创建一次，在create中接收路径传来的值，所以接收到的值不会发生改变解决方法：监听路由的变化 $route()使用场景：当 一个组件被复用的时候，虽然路由发生变化，但页面上的数据不会发生变化 比如： 从列表页list点击商品，进入商品详情页details查看商品的详细信息,当点击商品时，跳...
（一）使用webpack 根据模板生成HTML，首先需要安装插件 html-webpack-plugin。在工程文件夹安装插件 命令如下：npm install html-webpack-plugin --save-dev (二） 新建 webpack.config.js，名称可以更改，更改后 运行时，需指定 配置文件名称。 例如，配置文件名为 my.webpack.config.js, 则需要在package.json 文件中，在scripts 处添加如下代码："scripts": {"webpack": "webpack --config webapack.config.js --progr...
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。安装在node环境下，通过npm安装webpacknpm install webpack -g启动webpackwebpack // 执行一次开发的编译
webpack -p // 针对发布环境编译(压缩代码)
webpack -w // 进行开发过程持续的增量编译(飞快地!)
webpack -d // 生成map映射文件，告知哪些模块被最终打包到哪里了
webpack --conf...
webpack.conf.js 中 resolve.alias 配置resolve: {extensions: [‘.js‘, ‘.vue‘],alias: {‘@‘: path.resolve(__dirname, ‘src‘),‘@scss‘: path.resolve(__dirname, ‘src‘, ‘scss‘),}
}配置了resolve.alias 后，在js中我们可以这样用// 原本这样写
import hongAlert from ‘./../src/scss/icon.scss‘// 现在可以这样写
import hongAlert from ‘@scss/icon.scss‘在scss中需要这样写，注意是~@// 原本这样写
@import ...
题外话：年初项目重构上线，项目技术栈使用vue+webpack，测试执行整个打包流程需要10分钟，同时又因涉及三个渠道，部署好环境就需半个小时，这严重延误了上线进度，因此提高webpack构建效率，成为了改善团队开发效率的关机之一。正文：一.抽离项目配置文件因为项目前后端分离，需要配置接口地址，当时没有考虑到分离配置文件，造成每次需要打包三次。 基本思路(百度)：把配置信息挂在window下，然后写在一个不打包的js中，页面单独...
写在最前暑假想要学习React, 发现React官网上的没有说明如何搭建React开发环境, 网上找的很多都是基于webpack3的, 或者直接使用脚手架, 所以趁着放假, 就稍微学了下webpack, 开始搭建自己的React项目. 第一次写博客, 如有错误, 请指出, 谢谢!之后也会继续更新从零搭建React全家桶系列, react+react-router+redux+es6. 希望大家多多支持.说明开发环境是windows 10技术栈版本node 10.3.0npm 6.1.0webpack 4.16.1react 16.4.1babel-co...
什么是webpack? 他有什么优点？ 首先对于很多刚接触webpack人来说，肯定会问webpack是什么？它有什么优点？我们为什么要使用它？带着这些问题，我们来总结下如下： Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：支持commonJS和AMD模块。支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写...
前言：在写这篇文章之前，我必须要吐槽一下webpack了。特别喜欢更新版本，更新就算了，文档还跟不上。文档真的让人迷惑了，大爷的。背景：由于我正在写sourceMap反向定位源码的功能，所以最近需要使用到webpack的source-map配置。因为公司webpack的版本有2.0和4.0的，所以在做sourceMap配置的时候，真的是花费了很大的气力。无力吐槽，我们看正文吧 =======================================================================...
