![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
kaiking_g
永远不要把钱看作财富,真正的财富是占据生存资料实现永久不劳而获,不要把赚钱看成了最终目标,你嘲笑按揭买房的人是房奴,事实却是富人都在负债买资产,穷人越存钱越穷!
展开
-
webpack一些常见问题
webpack4要求webpack.config.js导出的对象中要有mode属性;webpack命令行配置mode 方式一:打包时候输入: webpack --mode=production 或者 webpack --mode=development 方式二:在配置文件webpack.json.js下配置 module.exports = {...原创 2018-08-20 15:13:17 · 1447 阅读 · 0 评论 -
webpack基础配置
1.entry 入口配置// 单页面:module.exports = { entry: './src/index.js',};// 多页面:module.exports = { entry: { index: './src/index.js', search: './src/search.js', },};原创 2019-08-12 20:43:39 · 126 阅读 · 0 评论 -
webpack 自动清除上一次打包构建目录文件--clean-webpack-plugin
安装插件 clean-webpack-plugincnpm i -D clean-webpack-plugin配置在 webpack.prod.js 中引入,并配置插件+ const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = { // ... plugins:[ + new ...原创 2019-07-03 23:42:55 · 2775 阅读 · 0 评论 -
webpack压缩文件配置(html,css,js)
JS 文件的压缩,webpack内置了 uglifyjs-webpack-plugin,打包都是默认压缩了的当然也可以手动安装npm i -D uglifyjs-webpack-pluginCSS 文件的压缩,使用 optimize-css-assets-webpack-plugin,同时使用 cssnano 预处理器(cssnano需要另外安装)需要先安装这两个插件npm i -D ...原创 2019-07-03 00:32:58 · 1580 阅读 · 0 评论 -
webpack 文件指纹的配置
执行前,先保证webpack项目能正常运行关于hash值:Hash: 和整个项⽬的构建相关,只要项⽬⽂件有修改,整个项⽬构建的 hash 值就会更改。Chunkhash: 和 webpack 打包的 chunk 有关,不同的 entry 会⽣成不同的 chunkhash 值。Contenthash: 根据文件内容来定义 hash ,⽂件内容不变,则 contenthash 不变。重命名 ...原创 2019-07-02 23:40:49 · 1048 阅读 · 0 评论 -
webpack解析css, less,scss
注意:安装之前,先保证webpack项目能正常运行!1.安装依赖npm install style-loader css-loader -Dnpm install less less-loader -D2.配置,在webpack.json.js 下,新增规则:module.exports = { // ... module:{ rules:...原创 2019-06-18 00:21:51 · 924 阅读 · 0 评论 -
webpack解析React JSX
1.安装cnpm i react react-dom @babel/preset-react -D2.在 .babelrc 文件下,增加配置:{ "presets": [ "@babel/preset-env", "@babel/preset-react" // 新增 react 配置 ]}...原创 2019-06-17 23:49:18 · 854 阅读 · 0 评论 -
webpack解析ES6
注意:安装之前,先保证webpack项目能正常运行!1.安装npm i @babel/core @babel/preset-env babel-loader -D2.在src目录下,创建 .bebalrc 文件,并配置:{ "presets": [ "@babel/preset-env" ]}3.修改webpack.config.js 配置:...原创 2019-06-17 22:20:02 · 361 阅读 · 0 评论 -
webpack的文件监听实现(热更新)
注意:安装之前,先保证webpack项目能正常运行!目录前言1 第一种方式, --watch1.1 配置package.json1.2 到控制台输入 npm run watch1.3 修改文件,保存后,会自动打包,到浏览器刷新,才能看到变化。1.4 文件监听的原理理分析2 第二种方式,在配置 webpack.config.js 中设置 watch: true(热更新:webpack-dev-se...原创 2019-06-19 23:51:26 · 6484 阅读 · 0 评论 -
webpack解析字体,file-loader
注意:安装之前,先保证webpack项目能正常运行!因为字体和图片都不是代码文件,所以,都可以使用file-loader1.安装 file-loader 依赖cnpm i file-loader -D2.在src目录下创建font文件夹,并引入字体 (这里引入AdobeGothicStd-Bold.otf.otf )3.配置,在 webpack.config.js 下新增配置:mod...原创 2019-06-18 23:48:25 · 2490 阅读 · 0 评论 -
webpack解析图片,file-loader;和通过url-loader解析的区别
注意:安装之前,先保证webpack项目能正常运行!目录1.安装 file-loader 依赖2.在src目录下创建img文件夹,并引入一张图片(这里引入的是图片文件名叫 logo.jpg)3.配置,在 webpack.config.js 下新增配置:在search.js 引入图片1.安装 file-loader 依赖cnpm i file-loader -D2.在src目录下创建img...原创 2019-06-18 23:53:28 · 2568 阅读 · 0 评论 -
webpack初始化项目
该初始化教程,基于 windows系统的cmd/dos 窗口初始化webpack项目:// 1.先创建一个项目文件夹mkdir webpack-001 // 2.进入该文件目录下cd webpack-001 // 3.初始化配置,假设不要-y,会出现很多true和false的选项,-y的意思全默认true,然后直接初始化完成npm init -y // 此时,该目录下会...原创 2019-06-12 22:00:39 · 2577 阅读 · 0 评论 -
vue中快速使用svg方法(自动导入)
1.安装插件:npm install svg-sprite-loader --save-dev2.配置svg-sprite-loader:,在目录build 中找到webpack.base.conf// 注释默认配置// {// test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,// loader: 'url-loader',// o...原创 2019-04-30 15:20:13 · 1939 阅读 · 0 评论 -
vue 项目实战过程中,遇到的问题与解决方法
vue,涉及到三层关系组件嵌套(父子孙),孙子级组件首次无法加载数据问题解决 方法:把赋值方法写在this.$nextTick 里面即可比如:this.$nextTick(() => { this.form.data.classTypeId = this.editClassData.classTypeId})...原创 2019-01-25 15:15:07 · 1704 阅读 · 0 评论 -
关于百度echart的一些案例
案例一:条形统计图效果如图:html源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="myCha...原创 2019-09-11 18:06:48 · 338 阅读 · 0 评论