模块化:
导入相关依赖包指令:
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm i --save @babel/polyfill
运行指令:
创建babel.config.js
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
}
}
]
]
module.exports = { presets }
npx babel-node .\index.js
默认导出一个模块里面只能有一个
一起用就要用逗号割开 ,
要单纯的运行某个模块的代码 直接impot就行 不需要 from
直接导入jquery 来隔行变色 不会成功,因为这种ES6语法的模块化 浏览器不是兼容的很好,通过配置webpack 来编译打包文件
默认打包生成dist目录下的main.js文件 development不会将生成的代码压缩 去掉空格等 production会去掉 所以在上线的时候用production
将原有的”dev” : :”webpack” 删除 换成这个 自动打包
用webpack-dev-server生成的bundle.js 并不是生成在物理磁盘中 而是生成在内存中,所以看不到
所以可以直接这样引用bundle.js 根目录下有看不见的bundle.js
注意!!!!!!!!!!
引用看不见的bundle.js才能实时更新
也可以
devServer里面还可以加 open :true 自动打开
host : ’127.0.0.6’ 自己随便设置
用npm run dev时候 自动打开地址 端口号为3000 自动打开src下的文件 就是index.html
npm i html-webpack-plugin -D
注意将原来的index.html拷贝的一份放在了根目录下的内存里 看不到 但是是存在的
所以能直接跳转到index.html
use数组里面的顺序不能变 从后往前执行的,先经过css-loader 他是解析css文件里面的代码,交给style-loader挂载到页面上 每个load是独立的 功能单一的
安装加载器 npm i css-loader style-loader -D
由顺序可以看出 less 文件先经过less-loader变成css css通过css-loader再被读取到 ,读取到的css文件经过 style-loader作用挂载到页面上了