qq_36836277的博客

1.懒加载// es6草案中的语法，jsonp实现动态加载文件，加载完返回的是promiseimport ('./source.js')vue的懒加载，react的路由懒加载let button = document.createElement('button')button.innerHTML = 'heoolo'button.addEventListener('click', function() { // es6草案中的语法，jsonp实现动态加载文件,返回一个promise

1.noparse设置不要去解析包中的依赖库和依赖项

1.直接使用webpack构建前端项目

1.配置alias// vue.config.jsconst path = require('path');module.exports = { configureWebpack: { resolve: { alias: { '@': path.join(__dirname, 'src'), }, }, },};

1.webpack的安装webpack一般是本地安装，也就是在自己所需要的项目中进行安装，需要安装的包有两个-webpack webpack-cli -D-D表示安装的是依赖，在项目上线的时候不需要加载注：项目初始化的时候，可以直接使用命令：cnpm init -y他与之前使用的cnpm init 的区别是会默认进行一系列的设置，而不需要自己在一步步的回车，方便了项目的开发。2.w...

1.通过event.target可以获得触发事件的元素2.event.currentTarget返回绑定事件的元素如果只是看上面这两句话，其实很抽象，很难理解到底是什么意思，如果元素没有嵌套，他们都能够获得当前触发事件的元素，真正的区别在于冒泡和捕获在页面中点击一个元素，时间是从这个元素的根元素逐层传递下来的，这个事件称为事件的捕获阶段，当事件传递到这个元素后，又会把事件逐层传递回去，知道祖...

1.每次打包文件的时候都能清空原有的打包文件//webpack.config.jslet {CleanWebpackPlugin} = require('clean-webpack-plugin')plugins: [ new CleanWebpackPlugin()]注：这里引进插件时，一定要用{}，否则会报错“CleanWebpackPlugin is not a con...

在前面的章节的基础之上，首先新建一个新的项目webpack-dev2（1）配置多个入口路径 entry:{ home:'./src/index.js', //首页 other:'./src/other.js' //其他页 },（2）配置对应的出口路径 output:{ //[name],这里的name代表home，other ...

使用背景：如何将打包后的不同类型的文件放置在不同的文件夹下，比如css文件，图片等解决办法::可以在不同的文件类型的设置下，在option选项中添加一个outputPath的属性 { test:/\.(png|jpg|gif)$/, //做一个限制，当我们的图片小于多少k的时候，用base64来转化 ...

如何使用在webpack使用图片，以及如何打包我们的图片图片引入方式1）在js中创建图片来引入2）在css引入图片background(‘url’)3)1.在js中创建图片来引入（1）在index.js中写入以下代码import logo from ‘./gogo.jpg’let image = new Image();image.src = logo //这里写图片的路径do...

1.如果定义了多个es6类2.如果存在存在generator函数因为generator函数是一个内置的api，所以babel不会直接去转换这个api，需要进一步配置转换方法。(1)安装插件 @babel/plugin-transform-runtime 和@babel/runtimenpm install --save-dev @babel/plugin-transform-runtime...

背景：如何把es6或者更高级的语法转换成es5，需要用babel，如果不进行转换，打包的时候依然会是es6，浏览器不能识别。1.将开发模式设置为development模式2.安装babel-loader和@babel/core,@babel/core,@babel?preset-env3.在module中进行设置module:{//模块 rules:[ {...

1.如何抽离css样式也就是把css样式最终以link的形式插入到文件中，stylus-loader会默认吧标签插到style标签，我们需要另外一个插件（install mini-css-extract-plugin）来抽离样式。1.安装mini-css-extract-plugin2.引入mini-css-extract-pluginlet MiniCssExtractPlugin = ...

首先是在开发者环境下自己书写的css，虽然可以直接在index.html中引入，但是index.html会原封不动的导出来，但是我们需要重新将css模块进行输出，所以需要重新设置。1.在index.js中引入index.css//index.jsrequire('./index.css');2.加载css文件的解析插件loader的作用是将源代码进行转化，转换成·我们需要的模块，lo...

背景：一般情况下，我们需要通过一个ip地址，或者是通过localhost的方式来访问一个页面，这种情况下，我们需要进行设置。解决办法：使用webpack-dev-server安装完webpack-dev-server 后，可以直接运行npx webpack-dev-server，会生成一个地址。1.不做任何设置如果不做任何设置，直接在项目目录下运行npx webpack-dev-serve...