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 · 1569 阅读 · 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 · 140 阅读 · 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 · 2846 阅读 · 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 · 1615 阅读 · 0 评论 -
webpack 文件指纹的配置
执行前，先保证webpack项目能正常运行关于hash值：Hash： 和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改。Chunkhash： 和 webpack 打包的 chunk 有关，不同的 entry 会⽣成不同的 chunkhash 值。Contenthash： 根据文件内容来定义 hash ，⽂件内容不变，则 contenthash 不变。重命名 ...原创 2019-07-02 23:40:49 · 1076 阅读 · 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 · 944 阅读 · 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 · 876 阅读 · 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 · 381 阅读 · 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 · 6623 阅读 · 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 · 2539 阅读 · 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 · 2598 阅读 · 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 · 2607 阅读 · 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 · 1984 阅读 · 0 评论 -
vue 项目实战过程中，遇到的问题与解决方法
vue，涉及到三层关系组件嵌套（父子孙），孙子级组件首次无法加载数据问题解决 方法：把赋值方法写在this.$nextTick 里面即可比如：this.$nextTick(() => { this.form.data.classTypeId = this.editClassData.classTypeId})...原创 2019-01-25 15:15:07 · 1725 阅读 · 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 · 379 阅读 · 0 评论