![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
自动化构建工具——webpack
webpack相关内容
yoliu
这个作者很懒,什么都没留下…
展开
-
自动化构建工具——16.webpack5介绍和使用
webpack5介绍和使用1.目前进度此版本重点关注以下内容:通过持久缓存提高构建性能.使用更好的算法和默认值来改善长期缓存.通过更好的树摇和代码生成来改善捆绑包大小.清除处于怪异状态的内部结构,同时在 v4 中实现功能而不引入任何重大更改.通过引入重大更改来为将来的功能做准备,以使我们能够尽可能长时间地使用 v5.2.下载npm i webpack@next webpack-cli -D3.自动删除 Node.js Polyfills早期,webpack 的目标是允许在浏览原创 2020-07-08 17:14:16 · 1179 阅读 · 0 评论 -
自动化构建工具——15.webpack 配置详情
webpack 配置详情官方文档:中文:https://webpack.docschina.org/英文:https://webpack.js.org/因为webpack是国外发明的,所以最新的内容都在英文官方文档里,所以建议使用英文官方文档1.entry入口起点1.1.string形如:entry: ‘./src/index.js’ 字符串的形式入口数:单入口形成chunk数: 打包形成一个chunk。输出一个bundle文件。此时chunk默认名称为main即[na原创 2020-07-08 14:17:45 · 175 阅读 · 0 评论 -
自动化构建工具——14.webpack 性能优化
webpack性能优化一、开发环境性能优化最关键的点就是希望打包速度更快一些就够了1.1.优化打包构建速度HMR1.1.1HMRHMR:如果一个模块发生变化,只更新一个模块,其他模块使用缓存目录结构复用5.开发环境配置中08.开发环境配置HMR:hot module replacement 热模块替换/模块热替换作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块),极大提升构建速度。1.1.1.1.运行npx webpack-dev-server并修改原创 2020-07-07 22:34:05 · 272 阅读 · 0 评论 -
自动化构建工具——13.webpack 生产环境基本配置
生产环境基本配置之前学习了各种文件的处理,接下来就需要汇总到一起,生成一个我们想要的生产环境的基本配置const { resolve } = require('path')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')const HtmlWebpackP原创 2020-07-05 15:15:51 · 264 阅读 · 0 评论 -
自动化构建工具——12.webpack 压缩html和js
压缩html和js1. js压缩生产环境下会自动压缩js代码,所以js压缩只需要将配置文件中的mode设置为production即可1.1 配置文件const { resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/js/index.js', output: { filename: 'js/bui原创 2020-07-05 14:15:31 · 197 阅读 · 0 评论 -
自动化构建工具——11.webpack JS兼容性处理
js兼容性处理接着上一节目录结构进行修改index.jsconst add = (x, y) => { return x + y;}console.log(add(4, 5))运行webpack,查看构建后的结果built.js,可以看到并没有进行兼容性处理将构建好的index.html在Chrome浏览器打开,可以看到没有问题在IE浏览器打开,可以看到提示语法错误,即出现兼容性问题所以需要进行兼容性处理1. 需要的核心库babel-loade原创 2020-07-05 11:52:29 · 255 阅读 · 0 评论 -
自动化构建工具——10.webpack JS语法检查
js语法检查作用:规范代码风格和检查常见语法错误需要下载的库语法检查eslint-loadereslint规则(Airbnb)设置eslint-config-airbnb-baseeslint-plugin-import设置检查规则package.json中的eslintConfig设置"eslintConfig": { "extends": "airbnb-base", // 规则},修改配置文件const { resolve } = require('pa原创 2020-07-04 22:22:47 · 206 阅读 · 0 评论 -
自动化构建工具——9.webpack压缩css
压缩CSSCSS体积越小,请求速度也会更快,那么加载速度就快,用户看到效果就更快一些,这样用户体验就会更好,所以在代码上线之前一定要压缩CSS。目录结构沿用上一节需要下载的插件optimize-css-assets-webpack-pluginnpm i optimize-css-assets-webpack-plugin -D步骤引入插件const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-原创 2020-07-04 16:43:05 · 128 阅读 · 0 评论 -
自动化构建工具——8.webpack CSS兼容性处理
CSS兼容性处理让我们在写样式的时候不用太过操心兼容性问题,而把它交给工具,让工具自动去完成,这样就大大解放程序员的一些操作,让程序员只考虑最简单的东西,通过工具帮我们做兼容性处理。目录结构沿用上一节提取CSS成单独文件需要下载的库postcss-loader、postcss-preset-envnpm i postcss-loader postcss-preset-env -D在package.json文件中的browserlist配置browserlist的详细配置可以去GitHub搜原创 2020-07-04 16:06:05 · 264 阅读 · 0 评论 -
自动化构建工具——7.webpack提取CSS成单独文件
生产环境搭建——提取CSS成单独文件一、目录结构a.css#box1 { width: 100px; height: 100px; background-color: pink;}b.css#box2 { width: 200px; height: 200px; background-color: deeppink;}index.jsimport '../css/a.css'import '../css/b.css'index.html原创 2020-06-08 13:04:07 · 204 阅读 · 0 评论 -
自动化构建工具——6.webpack构建环境介绍
构建环境介绍开发环境开发环境指的就是能让代码本地调试运行的环境,详细的就是我们写的源代码里面包含ES6语法、less文件等,经过webpack的编译处理(例如将less编译成css,Es6编译成浏览器能识别的语法等),输出bundle这个能被浏览器所运行的资源文件。这个环境为了让程序员更加轻松、方便,所以还加了一些自动化的工作(比如自动打开浏览器、自动编译等操作),让我们的效率更高。这就是开发环境所做的事情。生产环境概念:生产环境就是能让代码优化上线运行的环境。我们要做的事情有:CS原创 2020-06-08 12:09:31 · 115 阅读 · 0 评论 -
自动化构建工具——5.webpack开发环境配置
开发环境配置随着项目资源越来越多,如果不划分目录就会非常的乱,所以需要对项目进行目录划分基本目录划分将src目录主要分为:css——样式资源目录imgs——图片资源目录js——js文件目录media——媒体目录(存放其他资源)index.html——首页webpack.config.js——配置文件基本开发环境配置webpack.config.js/** * 开发环境配置:能让代码运行成功 * 运行项目指令: * webpack 会将打包结果输出出去 *原创 2020-06-07 23:00:54 · 113 阅读 · 0 评论 -
自动化构建工具——4.webpack打包各类资源
webpack各类资源的打包将所需要的包下载到根目录,这样在子目录用的时候会自动向上一级找包一、创建配置文件项目和配置是两方面,项目的代码用的是ES6模块;而配置模块是基于node.js平台运行的默认采用commonjs。创建文件 webpack.config.js基本配置内容如下/** * webpack.config.js webpack的配置文件 * 作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置) * * 所有构建工具原创 2020-06-07 19:02:44 · 162 阅读 · 0 评论 -
自动化构建工具——3.webpack初体验
一、目录结构|-- 02.webpack_start 项目根目录|---- src 项目源代码目录|------ index.js webpacke入口起点文件|------ index.css|------ data.json|---- build 代码通过webpack打包处理之后输出的目录|------ index.html二、初始化配置2.1 初始化package.json打开终端,输入指令:npm init -y原创 2020-06-07 18:52:37 · 157 阅读 · 0 评论 -
自动化构建工具——2.webpack简介
webpack简介webpack 是什么 ?webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。资源构建工具:就是将前端一系列需要做的小操作整合成一个大的工具,他一次性能干完,这样的工具就叫构建工具,Webpack就是构建工具中的一种。静态模块打包器:很多要引原创 2020-06-03 22:34:49 · 217 阅读 · 0 评论 -
自动化构建工具——1.webpack准备
一、技能点二、环境参数Node.js 10版本以上Webpack 4.26版本以上三、预备技能基本Node.js知识和Npm指令熟悉ES6语法原创 2020-06-03 22:20:29 · 115 阅读 · 0 评论