ES6模块化和Webpack

这篇总结主要讲解了ES6模块化和CommonJS模块化以及Webpack

ES6模块化

默认导入导出

导出：export default 对象
导入：import 对象名 from ‘js文件路径’

注意：
变量名应该与文件名一致
export default在同一个页面只能使用一次

按需导入导出

导出：export const 变量名 = 值
导入：import {变量名1，变量名2} from ‘js文件路径’
修改别名：import {变量名 as 新名称} from ‘js文件路径’

注意：
按需导出可以导出多次
按需导出和默认导出是相互独立，互不影响，因此他们是可以同时使用

统一导入导出

统一导出：

const nam = '3'
const ag = 2
const se = '1'
export {nam,ag,se}

统一导入：

import * as m from './toods.js'

这里的m会拿到export 所有导出数据，产生一个对象
不要去和按需导出同时使用

Webpack

是什么？是一个静态模块打包工具
作用：压缩与混淆代码

使用流程：
第一步：初始化npm 和安装局部开发依赖的webpack
npm init -y npm i webpack webpack-cli -D
第二步：在项目的根目录下打开终端，输入打包命令：npx webpack

默认入口文件: ./src/index.js
默认出口文件: ./dist/main.js
webpack只会打包入口文件，如果要打包其他文件，则需要与入口文件生成依赖关系

自定义配置

1.根目录下新建文件：webpack.config.js

2.导出配置对象：module.exports = { 配置项 }

3.常用配置项：
打包模式mode：默认production，生产模式(压缩版本)
development，开发模式(不压缩)
入口文件：entry:’文件路径’
出口文件：output:{path:’文件夹路径’，filename:’文件路径’}

示例：

const HtmlWebpackPlugin = require('html-webpack-plugin')
//webpack.config.js文件下
//node导出语法
module.exports = {
    //打包模式  开发版(不压缩) 而production则是生产模式(压缩版)
    mode:development,
    //设置入口文档
    entry:`${__dirname}/src/tool.js`,
    //设置出口文档
    output:{
        //设置出口文档文件夹
        path:`${__dirname}/aaa`,
        //设置出口文档文件
        filename:'out.js'
    },
     plugins: [
        new HtmlWebpackPlugin({ // 打包输出HTML
             minify: { // 压缩HTML文件
              removeComments: true, // 移除HTML中的注释
              collapseWhitespace: true, // 删除空白符与换行符
                 minifyCSS: true// 压缩内联css
             },
             template: `./public/index.html` 
            // 指定压缩哪一个html文件, 相对于根目录
         })
     ],
     module:{ // 处理非js模块
        rules:[ // 规则
          {
            test: /\.css$/, 		// 正则测试
        use: ['style-loader','css-loader'] 	// loader
          },
            {
    test: /\.less$/,     // 正则匹配，以.less结尾的文件
    // 如果发现是.less文件，则由如下三个loader来处理
    // 处理的顺序是   从右向左
    // less-loader: 作用是加载less文件，会帮你less转成css
    // css-loader: 作用是允许.js中引入.css
    // style-loader:作用是在.html上创建style标签，把css代码输入进去
    // 匹配成功，使用指定的loader
    use: ['style-loader', 'css-loader', 'less-loader'] 
}
        ]
      }
}

4.npm run build 与 npm run dev 配置
package.json的script对象中: “build” : “webpack”
相当于给node环境增加一个命令：npm run build
作用是按照webpack.config.js文件配置对项目进行打包

package.json的script对象中: “dev” : “webpack –config vue.config.js”
相当于给node环境增加一个命令：npm run dev
作用是按照vue.config.js文件配置对项目进行打包

npm run build 打包流程

1.他会先去package.json中找build配置
2.如果有，就读取build配置，并执行真正的webpack命令：npx webpack 配置文件。反之报错
3.检查有没有配置文件，如果有就优先加载设置的配置文件，如果没有就加载默认配置文件webpack.config.js
4.根据配置文件得到配置参数
5.根据配置参数找到入口文件，并开始构建依赖关系图
6.开始打包：压缩，混淆
7.将打包后的代码放入配置参数的出口文件中