![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack5
webpack5系列
致敬代码大神
这个作者很懒,什么都没留下…
展开
-
Webpack5实战笔记----1.了解与安装webpack5
环境参数:Node.js 10版本以上webpack 4.26版本以上预备技能:基本Node.js知识和Npm指令熟悉ES6语法原创 2021-11-01 09:22:07 · 205 阅读 · 0 评论 -
Webpack5实战笔记----2.上手webpack5
新建项目 webpackstumkdir webpackstu && cd webpackstunpm init -y //初始化npmnpm install webpack webpack-cli --save-dev //安装webpack基础工程目录结构为: webpackstu |- package.json+ |- index.html+ |- /src+ |- index.js我们还需要调整package.json文件,以...原创 2021-11-01 09:59:10 · 129 阅读 · 0 评论 -
Webpack5实战笔记----3.使用局部webpack对项目打包
进入项目文件夹后当所有依赖安装完成后,输入命令npx webpack再次通过live server运行成功。注意:一般项目会把src里面的index.js作为入口,如果我们想指定src的其他.js文件作为入口,采用如下命令。npx webpack --entry ./src/xxx.js这样操作dist目录仍然可以产出main.js说明修改入口成功。...原创 2021-11-01 11:11:30 · 173 阅读 · 0 评论 -
Webpack5实战笔记----4.修改webpack.config.js文件名与文件结构依赖
如果webpack.config.js文件名发生修改,则package.json里的命令就需要修改成对应文件名的命令。假设文件名修改成lg.webpack.js,则命令变成:"build":"webpack --config lg.webpack.js"文件结构依赖:当在js文件夹里面创建新的模块后,需要在入口文件例如index.js里面导入这个模块。比如:新建模块login.js,则需要在index.js里面导入import './js/login.js'...原创 2021-11-01 15:25:34 · 597 阅读 · 0 评论 -
Webpack5实战笔记----5.css-loader、style-loader和less-loader
安装css-loader,直接在终端输入命令:npm i css-loader -D在src目录下新建目录css,并在css下新建login.css文件//login.css的内容.title { color: red;}在js目录下新建login.js文件//导入css文件login.css,如果有多个文件则用感叹号分隔,这是在文件中导入的方式import 'css-loader!../css/login.css'function login() { ..原创 2021-11-01 17:48:31 · 1342 阅读 · 0 评论 -
Webpack5实战笔记----6.browserslitrc
项目兼容哪些平台?caniuse.com网站的Browser usage table统计了所有浏览器的占有规则。命令:npx browserslist可以查看默认兼容的浏览器平台。方法1.可以在package.json里面添加配置:"browserslist":[ ">1%", "last 2 version", "not dead"]方法 2.也可以新建文件.browserslistrc,文件内容如下:运行命令即可得出兼容平台。.原创 2021-11-01 20:32:16 · 244 阅读 · 0 评论 -
Webpack5实战笔记----7.postcss工作流程
postcss是什么?利用javascript转换样式的工具postcss安装命令:npm i postcss -Dpostcss-cil安装命令:npm i postcss-cli-D上手运行:在css目录下 新建文件test.css,内容如下:.title { /* 测试,利用postcss对下面的样式做兼容性处理 */ display: grid; transition: all .5s; user-select: ...原创 2021-11-01 21:09:06 · 213 阅读 · 0 评论 -
Webpack5实战笔记----8.postcss-loader处理兼容
postcss-loader的作用和css-loader类似,即让计算机完成兼容样式的操作安装postcss-loadernpm i postcss-loader -D在webpack.config.js中进行配置修改:const path = require('path')module.exports = { entry: './src/index.js', output: { filename: 'build.js', //outp原创 2021-11-01 23:02:35 · 1543 阅读 · 0 评论 -
Webpack5实战笔记----9.importLoader处理兼容
问题:test.css的内容如下:.title { transition: all .5s; user-select: none;}login.css的内容如下:/* 导入test.css */@import './test.css';.title { color: #12345678;}再次npm run build发现运行之后的test.css里面的代码并没有做兼容性处理。问题分析:login.css @import 语句导入了test原创 2021-11-01 23:30:09 · 410 阅读 · 0 评论 -
Webpack5实战笔记----10.file-loader处理图片
问题:新建img文件夹放入图片资源。在js文件夹里新建image.js,内容如下:function packImg() { //创建一个容器 const oe = document.createElement('div') //创建img标签,设置src属性 const oImg = document.createElement('img') //加default是为了兼容webpack5 oImg.src = require('../i原创 2021-11-02 08:53:46 · 501 阅读 · 0 评论 -
Webpack5实战笔记----11.设置图片名称与设置输出图片目录
修改webpack.config.js的内容:const path = require('path')module.exports = { entry: './src/index.js', output: { filename: 'build.js', //output必须设置绝对路径,所以这里导入path模块 path: path.resolve(__dirname, 'dist'), //静态资源加载例如图片加载需要原创 2021-11-02 23:09:22 · 597 阅读 · 0 评论 -
Webpack5实战笔记----12.url-loader处理图片
安装url-loader:npm i url-loader -D修改webpack.config.jsconst path = require('path')module.exports = { entry: './src/index.js', output: { filename: 'build.js', //output必须设置绝对路径,所以这里导入path模块 path: path.resolve(__dirname..原创 2021-11-03 09:10:42 · 427 阅读 · 0 评论 -
Webpack5实战笔记----13.asset处理图片
asset整合了资源:/*** asset module type* 01. asset/resource -->file-loader* 02. asset/inline --->url-loader* 03. asset/source --->raw-loader*/处理图片:修改webpack.config.js:const path = require('path')module.exports = { entry: './...原创 2021-11-03 09:49:46 · 428 阅读 · 0 评论 -
Webpack5实战笔记----14.webpack插件
loader:转换 特定类型plugin:更多事情( )安装清除文件的插件的命令:npm i clean-webpack-plugin -D使用插件:const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = { entry: './src/index.js', output: { filename: 'build.js', ...原创 2021-11-03 11:17:56 · 141 阅读 · 0 评论 -
Webpack5实战笔记----15.webpack-server未能显示html问题
安装:npm install --save-dev webpack-dev-serverwebpack.config.jsconst path = require('path'); // 导入 node.js 中专门操作路径的模块const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成htmlmodule.exports = { mode: 'development', // mode 用来指定构建模式.原创 2021-11-03 23:51:53 · 531 阅读 · 0 评论