webpack
文章平均质量分 65
杨晓白
帮助别人,成就自己
展开
-
package.json
如果有些包安装不上的话,你就按照这些package.json 搞就行啦 { "name": "webpack-base", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev:build": "webpack --env.development --config ./build/webpack.base.js", "dev": "webpack-dev-server --原创 2021-03-11 14:25:31 · 93 阅读 · 0 评论 -
webpack前置文章
webpack 默认支持 模块的写法 commonjs 规范 node webpack-cli 解析用户传递的参数 es6 规范 esmodule 把这个模块打包 解析出浏览器可以识别的代码 webpack webpack-cli 0配置的方式来打包 // --save-dev // npx npm 5.2之后出来的 npx webpack // 两个模式 开发模式 生产环境 // --mode 传入 // npm run scripts 里面可以配置对应的命令 // webpack配置文件默认叫 webp原创 2021-03-11 13:41:22 · 83 阅读 · 0 评论 -
webpack-3
webpack各种优化 上一章节我们已经掌握了webpack常见的所有配置 这一节我们来看看如何实现webpack中的优化,我们先来编写最基本的webpack配置,然后依次实现各种优化! const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); module.ex原创 2021-03-11 13:17:54 · 217 阅读 · 0 评论 -
webpack-2
Webpack中必须掌握的配置 loader主要用于把模块原内容按照需求转换成新内容,可以加载非 JS 模块! 通过使用不同的Loader,Webpack可以把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等。 我们来看看这些我们必须掌握的loader! 1.loader的编写 1.1 loader的使用 test:匹配处理文件的扩展名的正则表达式 use:loader名称,就是你要使用模块的名称 include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹 options:原创 2021-03-11 13:12:35 · 111 阅读 · 0 评论 -
webpack-1
从0搭建自己的webpack开发环境 1.什么是Webpack? webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle 使用Webpack作为前端构建工具: 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化:压缩 Ja原创 2021-03-11 11:41:23 · 87 阅读 · 0 评论