随笔分类 - Webpack
摘要：npm 一键安装 package.json里的依赖时有2种情况： 1.package.json不存在时 运行命令: npm init可自动创建package.json文件 2.package.json存在时 运行命令:npm install 或者 npm install –save-dev会自动将p
阅读全文
摘要：我们在写代码的时候可能有些CSS并没有用到，我们如何利用webpack将冗余的CSS清除掉呢？ 可以使用 purifycss-webpack 达到该目的。 1.安装 purifycss-webpack,glob 和 purify-css 2.在配置文件中引入 purifycss-webpack 3.
阅读全文
摘要：一、删除dist目录 有时候我们需要在打包文件之前删除之前打包的dist目录，如何做？ 1.安装new cleanWebpackPlugin(['dist']) 2.在webpack.config.js中引入该模块 3.在webpack.config.js中的plugins进行配置 4.执行 npm
阅读全文
摘要：先看下下面的图片： 我们可以看到，通过Webpack打包后，默认CSS是通过 内部样式表 写入的。我们如何把压缩后的CSS单独导出为CSS 呢？ 1.安装 extract-text-webpack-plugin@next 2.在webpack.config.js中引入该模块 3.在webpack.c
阅读全文
摘要：当css里面含有背景图片，用webpack打包时会报如下错： 如何处理这个问题呢？ 我们需要借助于 file-loader 和 url-loader 这2个包。 下面具体说一下步骤： 1.安装 file-loader 和 url-loader url-loader：引入的图片编码，生成dataURl
阅读全文
摘要：1.在 src 文件夹下面新建 css 文件夹，创建 common.css 整个文件目录如下图： 2.css建立好后，需要引入到入口文件，这里我们引入到base.js中 如下图： 3.终端安装 style-loader 和 css-loader 4.在 webpack.config.js 中 通过配
阅读全文
摘要：所谓热更新，就是在浏览器能同步刷新你的代码。webpack 热更新依赖 webpack-dev-server。具体实现步骤如下： 1.局部安装依赖 webpack-dev-server 2.在 webpack.config.js 配置相关参数 更多的配置可查看：https://webpack.js.
阅读全文
摘要：上一篇我们稍微提到了webpack.config.js。今天主要来说下如何配置多入口，多出口。 我们之前写到的webpack.config.js，具体代码如下： 上面的entry 和 output 就是单一的入口和出口。 下面我们创建一个多入口，多出口的实例。 准备工作如下： 1. 新建文件夹：pa
阅读全文
摘要：准备工作 1.新建文件夹：webpack-demo（下面我们简称该文件夹为根目录）,在根目录下面建两个文件夹，分别为src和dist。 1).src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。 2).dist文件夹：用来存放供浏览器读取的文件
阅读全文
摘要：webpack可用于打包所有的脚本，图片，样式表及其他资源。 今天来讲一下如何安装webpack 及 创建package.json。webpack依赖于npm和 node，所以本文是假设你已安装好了node 和 npm 的情况下进行的。 npm 安装包可分为 全局安装 和 局部安装。 全局安装的命令
阅读全文
