![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack学习笔记
文章平均质量分 77
钢铁直女.
这个作者很懒,什么都没留下…
展开
-
webpack分离开发依赖、发布依赖的配置09
webpack开发时依赖、发布时依赖配置分离创建配置文件结构,并对webpack.config.js文件进行抽离1. 创建build文件夹(存放配置文件)、base.config.js(存放公共依赖)、dev.config.js(存放开发时依赖)、prod.config.js(发布时依赖)2. 抽离webpack.config.js文件到base.config.js、dev.config.js、prod.config.js分别合并开发、发布所需配置文件1. 为了合并配置文件,需要安装webpack-merg原创 2021-05-06 11:19:12 · 274 阅读 · 0 评论 -
webpack-dev-server搭建本地服务器(解决webpack-cli、webpack-dev-server版本不兼容报错)08
webpack-dev-server搭建本地服务器webpack-dev-server搭建本地服务器,开发阶段使用1、安装webpack-dev-server(开发时依赖)2、在webpack.config.js文件中配置devServer3、运行启动解决webpack-cli、webpack-dev-server版本不兼容报错:webpack-dev-server搭建本地服务器,开发阶段使用webpack提供的本地开发服务器,基于node.js搭建。内部使用express框架,可以实现浏览器实时更新页原创 2021-05-06 10:01:13 · 1146 阅读 · 0 评论 -
webpack之plugin07
webpack之plugin1、认识plugin2、plugin与loader的区别3、几种常见的plugin及其使用3.1 BannerPlugin(webpack自带插件)3.2 htmlWebpackPlugin3.3 uglifyjsWebpackPlugin1、认识pluginplugin:插件,通常用于对某个现有的架构进行扩展。webpack中的插件可以对webpack现有的功能进行各种扩展,如打包优化、文件压缩等。2、plugin与loader的区别loader:是转换器,主要用于转原创 2021-05-01 18:08:06 · 125 阅读 · 0 评论 -
webpack之vue配置与基本使用06
webpack之vue配置1、安装vue2、创建vue实例,并挂载到dom上3、在webpack.config.js中进行配置el与template区别:vue终极结构1、安装vue安装vue的三种方式:直接下载引用CDN引用npm安装(此处使用npm安装vue,在终端输入npm install vue -save需要注意的是:-dev表示开发时依赖,后续在实际项目中也会使用vue的,所以并不是开发时依赖,输入命令时不带-dev安装成功2、创建vue实例,并挂载到dom上在inde原创 2021-05-01 14:37:39 · 131 阅读 · 0 评论 -
webpack之ES6转ES5(解决webpack、babel-loader、babel-core版本兼容问题) 05
ES6转ES5为什么要把ES6语法转成ES5webpack打包的js文件中,没有将ES6语法转成ES5。如:bundle.js用到了ES6的语法。而一些还不支持ES5的浏览器则无法运行ES6的代码,看不到运行效果。使用babel转换在终端中输入npm install babel-loader@7 babel-core babel-preset-es2015,安装babel-loader在webpack.config.js中配置babel-loader// 通过node里面的path包,动态原创 2021-04-24 12:05:19 · 683 阅读 · 0 评论 -
webpack之loader04
什么是loadercss文件的处理loader的使用使用多个loader时从右向左读,css当成模块打包,在入口文件里面,写上依赖的css文件打包:根据入口一次去找,根据依赖依次去找,npm run build使用的本地的webpack打包,在cmd等终端直接使用webpack打包使用的是全局的webpack补充:创建文件夹有规范,入口一般放在外面非盈利组织网站后缀为org,如:webpack.js.org...原创 2021-04-11 17:13:16 · 71 阅读 · 1 评论 -
webpack的基本使用03
一、用 npm 安装 Webpack(需要 Node.js v0.6 以上支持)1.win+r打开cmd窗口,输入npm install webpack -g2. 创建新项目3. 进入项目目录,通过npm init创建package.jasonname:项目名称,一定要简短,且不能有大写。可能在项目中使用过 var express = require(‘express’), require 函数后面的参数,就是package.json 中的name字段。version:版本号,安原创 2021-03-31 19:41:48 · 110 阅读 · 0 评论 -
安装webpack02——安装node.js、webpack详细教程(含修改npm全局下载、缓存路径)亲测有效
1、安装node.jsNode.js 官方网站下载: https://nodejs.org/en/2、修改npm全局下载、缓存路径原创 2021-03-29 19:55:31 · 205 阅读 · 0 评论 -
认识webpack、理解webpack与grunt、glup的核心区别01
认识webpack什么是webpack官方解释At its core,webpack is a static module bundler for modern JavaScript application.即 webpack是一个现代的JavaScript应用的静态模块打包工具关键词:模块化、打包从模块化和打包两个关键词来解释webpack1、模块化前端模块化方案:AMD、CMD、CommonJS、ES6ES6之前:开发人员进行模块化开发必须要借助其他工具;在通过模块化开发完成原创 2021-03-28 10:46:16 · 250 阅读 · 0 评论