小苹果的成长笔记

构建工具官网：https://www.webpackjs.com/安装：(前提条件：node.js必须安装)npm init -y (创建一个package.json,必需有这个才能安装模块) npm install webpack --save-dev npm install webpack-cli --save-dev 两条命令可以简写为： npm i we...

base-loader解析es6,将es6转化成es5,将react的jsx语法转化成浏览器可以认识的语言1.babel-loader //针对于babel的loader文件2.@babel/core //babel核心文件3.@babel/preset-env //解析更高级代码安装： cnpm i babel-loader @babel/core @babel/preset...

less:1.less2.less-loader安装：cnpm i less less-loader -Dindex.js入口文件引入：import '../less/index.less';src下新建less文件，index.less@w:120px;@border:1px solid #000;#box{ width: @w; border:@bo...

//webpack.config.js 配置文件// 1.入口(entry) :使用哪个模块来构建内部依赖图的开始// 2.输出(output) :在哪里输出它所创建的bundles及命名规则// 3.loader :可以促使webpack额外地处理非javascript文件// 4.插件(plugins) :执行范围更广的任务，如：打包优化和压缩等 const path = req...

官网 ： https://www.webpackjs.com/concepts/loaders/1.css-loader:作用：读取css文件安装：npm install css-loader -D官网： https://www.webpackjs.com/loaders/css-loader/注意：mini-css-extract-plugin 和 css-...

常用命令：mac/window(略) 自行百度 创建文件夹(window/mac)： mkdir webpack-demo创建文件(window)：type nul > 文件名.后缀名 mac:touch 文件名 type nul > index.js目录文件：——dist //打包生成后的文件——node_modul...

模式mode:方式一：使用参数mode 概念：模式，设置代码的运行环境（开发模式，生产模式）（4.x新增的）development 开发环境production 生产环境npm课程方式二 命令：webpack --mode developmentwebpack --mode production"devDependencies": { /...

安装： npm install webpack-dev-server -D webpack-dev-server // 启动服务器 参数： host: 服务器的ip地址 port:端口 open: 自动打开 hot :热更新 devServer:{ host:'localhost', //默认localhost port:'1513', //...

plugins插件搜索引擎或者github搜索下HtmlWebpackPlugin 安装： npm install html-webpack-plugin -D 引入：const HtmlWebpackPlugin = require("html-webpack-plugin"); 参数：title:页面标题template:页面模板filename:页面名字injec...

1.入口文件引入：只要引入都会被打包cnpm i jquey -Sindex.jsimport $ from 'jquey';$('ul li:last-child').css('background','pink')2.Webpack.ProvidePlugin引入 //建议使用这种自动加载模块，而不必用import或require 如果加载...