Webpack
黑卡米
这个作者很懒,什么都没留下…
展开
-
Webpack:CSS代码分割(13)
介绍对css代码进行压缩,css内容不会在放入html里。当一个入口引入多个css文件时,将会把文件合并。打包使用基础配置安装:npm install --save-dev mini-css-extract-pluginwebpack.config.js基础配置,若css里有body不会合并,配置了多少个body css都会存在。const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {原创 2020-10-29 14:06:07 · 296 阅读 · 0 评论 -
Webpack:打包分析,preloading、prefetching(12)
介绍使用webpack analyse分析打包是否合理,工具地址。prefetchinig可以让import的代码部分在主要js加载完成后再加载,部分浏览器有兼容问题需要注意。分析使用将–profile --json > stats.json命令放入package.json文件下scripts打包命令里。"scripts": { "build": "webpack --profile --json > stats.json --config webp原创 2020-10-24 15:24:32 · 266 阅读 · 0 评论 -
Webpack:js代码分割code splitting(11)
介绍当一个js文件因为业务问题变得很大,使用lodash可以对代码进行分割,并发请求可以减少加载时间,和用户重新加载文件的大小。每个Chunk就是一个分割下来的js文件。手动分割为公共的文件多创建几一个入口,打包的时候代码就会分开打包。module.exports = { entry: { main: './src/index.js' }, module: { rules: [ { te原创 2020-10-23 23:38:27 · 816 阅读 · 0 评论 -
Webpack:develoment和production模式的打包(10)
介绍每次在开发和生产环境都要切换代码会非常麻烦,在webpack里面可以用merge合并同样代码偷懒。使用安装代码合并包,-D代表 --save-devnpm install webpack-merge -D创建webpack.common.js将development和production共同的代码的抽出来放入webpack.common.jsconst path = require('path');const { CleanWebpackPlugin } = require('clean原创 2020-10-22 10:30:22 · 269 阅读 · 0 评论 -
Webpack:Tree Shaking(9)
介绍Three Shaking只支持import的静态引入模块的模式,require是commonJS动态引入不支持。在production打包模式下自动被使用。webpack.config.jsconst path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');const原创 2020-10-20 18:16:20 · 252 阅读 · 0 评论 -
Webpack:babel的使用(8)
介绍当我们使用ES6的语法时,低版本的浏览器只支持ES5,会发生兼容问题,这个时候就需要babel对es6代码转译为es5做支持。使用前准备官网:https://www.babeljs.cn/setup安装包1.webpack可以对babel进行操作npm install --save-dev babel-loader @babel/core2.es6语法转译es5的包,但promise的功能不会转换npm install @babel/preset-env --save-dev3.在es原创 2020-10-11 21:31:48 · 179 阅读 · 0 评论 -
Webpack:devServer自动打包和热更新(7)
介绍每次要编译代码时,手动运行 npm run build 就会变得很麻烦,devServer可以做到代码更新后自动打包并刷新浏览器。使用deServer后不会产生dist目录,为了打包的效率文件都会放入内存里。安装npm install --save-dev webpack-dev-server自动打包配置webpack.config.js{ "name": "webpack-demo", "version": "1.0.0", "description": "", "mai原创 2020-10-10 23:09:10 · 447 阅读 · 0 评论 -
Webpack:entry、output、devtools的配置(6)
entry和outputconst path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { mode: 'development', entry: { //多文件入口 main:'./src原创 2020-10-04 09:51:28 · 161 阅读 · 0 评论 -
Webpack:使用Plugins打包(5)
安装插件//该插件将为你生成一个 HTML5 文件, 并引用打包出来的js文件,方便查看打包效果npm install --save-dev html-webpack-plugin//所有在webpack's output.path 文件将被删除一次npm install clean-webpack-plugin -Dwebpack.config.jsconst path = require('path');var HtmlWebpackPlugin = require('html-web原创 2020-09-29 11:02:16 · 132 阅读 · 0 评论 -
Webpack:打包css、scss、font等样式文件(4)
本文假设你已阅读前章节的内容。安装打包文件//将css文件挂载到html的head的style里npm install style-loader --save-dev//分析css文件,将多个文件合并npm install --save-dev css-loader//将sass文件编译成cssnpm install sass-loader node-sass --save-dev//增加厂商前缀,如:-webkit-transformnpm i -D postcss-loade.原创 2020-09-28 22:39:47 · 394 阅读 · 0 评论 -
Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
问题描述版本兼容问题,降级版本就可以了。解决办法npm install autoprefixer@9.8.6 -D扩展:查看可用的版本npm view autoprefixer versions原创 2020-09-28 21:30:56 · 2211 阅读 · 0 评论 -
Webpack:打包图片文件(3)
本文假设你已经看过了前面的2个章节。应用场景webpack默认只支持js的打包,遇到图片、vue等不同格式的文件,需要不同的loader去打包。loader打包图片打包图片文件前先安装//对图片文件打包npm install --save-dev file-loader//将图片文件转换base64的loadernpm install --save-dev url-loader打包文件的代码const path = require('path');module.exports =.原创 2020-09-28 17:23:28 · 242 阅读 · 0 评论 -
Webpack:3分钟学会打包(2)
注意:本文章假设你已经阅读了【Webpack:安装和初始化项目(1)】打包文件的配置package.json { "name": "webpack-demo", "version": "1.0.0", "description": "", "private": true, //添加此代码,私有的部署防止意外发布为公开 "main": "index.js",//删除此行代码,去掉入口 "scripts": { //自定义打包命令,可以在项目路.原创 2020-09-27 11:15:27 · 139 阅读 · 0 评论 -
Webpack:安装和初始化项目(1)
介绍Webpack一个打包工具,基于nodejs开发的打包工具,可以将程序员写出来的不同模块的js等文件合并到一起去。这样做有几个好处。减少网络请求的次数,不用每个文件都向服务器发送一次请求了能将ES6的代码做一些兼容处理,兼容不同版本的浏览器如何开始1.首先安装Nodejs的LTS稳定版本,点击安装2.创建项目mkdir webpack-demo && cd webpack-demonpm init -ynpm install webpack webpack-cli原创 2020-09-22 23:49:44 · 189 阅读 · 0 评论