随笔分类 -  webpack

htmlWebpackPlugin config
摘要:|name|describe|type|default| | | | | | |favicon|html图标|string|''| |title|创建的html的title|string|'Webpack App'| |meta|meta标签|{object}|{}| |base|配置base标签| 阅读全文

posted @ 2022-09-24 13:48 In-6026 阅读(74) 评论(0) 推荐(0)

plugins
摘要:各个plugin的作用 ##个别不直观的plugin的解释: ###banner 用来添加注释,标注作品版权之类的(横幅) 但是和uglifyjsPlugin‘冲突’,因为uglifyjsPlugin会把所有注释都清理掉 阅读全文

posted @ 2022-09-24 13:48 In-6026 阅读(211) 评论(0) 推荐(0)

webpack基础——模块热替换
摘要:module.exports = { mode: 'development', devtool: 'eval', devServer: { static: './dist', hot: true, //就是这个hot,它默认是true打开的,但是好像也没什么效果(暂时没试出来) proxy: { ' 阅读全文

posted @ 2022-06-15 02:10 In-6026 阅读(20) 评论(0) 推荐(0)

webpack基础——启动一个服务器,让项目运行起来 webpackDevServer
摘要:首先需要安装 webpack-dev-server npm install -D webpack-dev-server 配置 webpack.config.js 和 package.json webpack: module.exports = { devServer: { static: './di 阅读全文

posted @ 2022-06-15 00:13 In-6026 阅读(284) 评论(0) 推荐(0)

webpack基础——sourceMap,映射出该错误再源代码中的位置
摘要:当我再 sub.js 里写了错误代码 明明错误再第8行,报错却说在第11行 因为这是打包后文件的错误位置,但这不利于我们修改错误,故需要也能够射出错误在源代码中的位置 在这里配置:devtool 阅读全文

posted @ 2022-06-14 23:37 In-6026 阅读(192) 评论(0) 推荐(0)

webpack基础——css样式模块化
摘要:当直接 webpack 打包的时候,所打包的 css 都是全局通用的,但这可能不是我们想要的。故需要 css 模块化 avator.scss body { .avator { width: 300px; height: 300px; transform: translateX(100px); } } 阅读全文

posted @ 2022-06-14 23:04 In-6026 阅读(249) 评论(0) 推荐(1)

webpack基础——打包时自动为css属性加上浏览器厂商前缀
摘要:###作用:在写 css 时,不需要再一些属性钱加上 -webkit-,-moz 等浏览器标识,可以通过 postcss 在 webpack 打包时自动加上 可以在webpack的loader里看postcss-loader的使用方法 点击查看原文: 来到这里,按指示往下配置 / 下载 在 webp 阅读全文

posted @ 2022-06-14 19:29 In-6026 阅读(139) 评论(0) 推荐(0)

webpack基础——loader,以url-loader为例
摘要:const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') m 阅读全文

posted @ 2022-06-14 16:20 In-6026 阅读(50) 评论(0) 推荐(0)

webpack基础——loader的简单使用
摘要:当需要打包图片的时候 npm i file-loader 或者 url-loader 区别: url-loader 更高级,可以更具图片的大小,选择打包的方式(转化成base64存在js里 / 转换成 url 通过网络请求获取) 当图片较小如1-2kb时放在js里可以减少请求次数,但图片过大时,转换 阅读全文

posted @ 2022-06-13 23:44 In-6026 阅读(45) 评论(0) 推荐(0)

webpack基础——插件,自动生成html引入打包后的js文件,html模板
摘要:npm i html-webpack-plugin const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') //引入 module.exports = { entry: { main: 阅读全文

posted @ 2022-06-13 23:17 In-6026 阅读(331) 评论(0) 推荐(0)

webpack基础——多入口打包与占位符[ ]
摘要:const path = require('path') module.exports = { entry: { //此处从两个入口进入,打包产生两个文件 main: path.join(__dirname, './src/js/main.js'), sub: path.join(__dirname 阅读全文

posted @ 2022-06-13 23:03 In-6026 阅读(81) 评论(0) 推荐(0)

webpack基础——安装环境
摘要:npm i webpack webpack-cli --save-dev ###单个打包文件 默认配置 npx webpack index.js //这就会把 index.js 及其依赖打包到 dist 文件夹下,生成一个同名文件 自定义配置,需要 wepack.config.js,在根目录下创建该 阅读全文

posted @ 2022-06-13 22:54 In-6026 阅读(23) 评论(0) 推荐(0)

导航