2020/08/07 模块化 ，webpack基本使用

模块化：

导入相关依赖包指令：

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作用挂载到页面上了