2. 前端工程化：模块化规范（导入与导出） 和 webpack 配置教程 Vue 单文件组件

前端工程化：es6模块化规范 和 webpack 配置

Commen.js 模块化规范

// es6 模块化规范中定义
// 1. 每个 js 文件都是独立的
// 2. 导入模块化成员使用 import 关键字
// 3. 暴露模块化成员使用 export 关键字

1. 默认导出 和 默认导入

// export default { }  mm1.js

let a = 10
let b = 20
let c = 30

function show() {
    console.log('999')
}

// 默认导出
export default {
    a,
    b,
    show
}

// 只能有一个默认导出  有两个的话控制台会报错
// export default {
//     c
// }


// 默认导入 index.js
import mm from './mm1.js'
console.log(mm)

2. 按需导出 和 按需导入

// 按需导出  mm1.js
export let s1 = 'aaa'
export let s2 = 'bbb'
export function say() {
    console.log('按需导入')
}

// 按需导入  index.js   
// 按需导入重命名 as (将 s2 命名为 ss2)
import mm, { s1, s2 as ss2, say } from './mm1.js'
console.log(mm)
console.log(s1)
console.log(ss2)
console.log(say)

3. 直接导入 并 执行模块里面的代码

// mm2.js
for(let i = 0; i < 3; i++) {
    console.log(i)
}

// 直接导入并执行模块里面的代码  index.js
import './mm2.js'

4. webpack 的基本使用

// 1. 新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
// 2. 新建 src 源代码目录
// 3. 并在文件夹中创建index.html文件 和 index.js文件

5. 在项目中安装和配置 webpack

// package.json   项目运行的网页
// 安装 webpack 
npm install webpack webpack-cli -D

// 在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack
// webpack.config.js  代码如下    mode 是编译模式
module.exports = {
    mode:"development" //development(开发模式) production(发布模式)
}

// 修改项目中的 package.json 文件添加运行脚本dev，如下：
"scripts":{
    "dev":"webpack"
}

// 运行终端命令：npm run dev
// 将会启动webpack进行项目打包

// 打包完成后 根目录会有 dist 文件夹

6. 配置 webpack 的打包入口和出口

// package.json   项目运行的网页
在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件
                 默认会将dist/main.js 作为默认的打包输出js文件
                 
如果不想使用默认的入口/出口js文件，我们可以通过改变 webpack.config.js 来设置入口/出口的js文件，如下：
// 导入 node.js 的路径 pah
const path = require("path");

module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/index.js"),
    //设置出口文件路径
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置文件名
        filename:"bundle.js"
    }
}

7. webpack 自动打包配置

// package.json   项目运行的网页
// 1. 安装自动打包功能的包:webpack-dev-server
        npm install webpack-dev-server -D

// 2. 修改package.json中的dev指令如下：
        "scripts":{
            "dev":"webpack-dev-server"
        }

// 3. 将引入的js文件路径更改为：<script src="/bundle.js"></script>
// 4. 运行npm run dev，进行打包

注意： 这里会出现  Error: Cannot find module ‘webpack-cli/bin/config-yargs‘ 这个错误，原因是 webpack 的版本不兼容

解决方法： 下载 webpack 相互兼容的版本 如下：

卸载：npm uninstall webpack  npm uninstall webpack-cli  npm uninstall webpack-dev-server
安装 webpack 版本：npm install webpack@4.29.0 -D  npm install webpack-cli@3.2.1 -D  npm install webpack-dev-server@3.1.14 -D

8. 配置html-webpack-plugin生成一个预览页面

我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面
还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
实现默认预览页面功能的步骤如下：

// package.json   项目运行的网页

    1.安装默认预览功能的包:html-webpack-plugin
        npm install html-webpack-plugin -D

    2.修改 webpack.config.js 文件，如下：
        //导入包
        const HtmlWebpackPlugin = require("html-webpack-plugin");

        //创建对象
        const htmlPlugin = new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称
            filename:"index.html"
        })
        
    3.继续修改 webpack.config.js 文件，添加plugins信息：
        module.exports = {
            ......
            plugins:[ htmlPlugin ]
        }

9. 自动打开浏览地址

// package.json   项目运行的网页

"scripts": {
    ......
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },
      
// --open 表示 自动弹开 网页  --host 127.0.0.1 表示地址 --port 8888  表示 端口号

10. webpack 加载器

通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包
    loader加载器包含：
        1).less-loader
        2).sass-loader
        3).url-loader:打包处理css中与url路径有关的文件
        4).babel-loader:处理高级js语法的加载器
        5).postcss-loader
        6).css-loader,style-loader

// package.json   项目运行的网页
// 注意版本问题  配置 css 加载器
1. npm install style-loader css-loader -D

2).配置规则：更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        // 配置 css 加载
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }

// 配置 less 加载器
1. npm install less-loader less -D

2).配置规则：更改webpack.config.js的module中的rules数组
      rules:[
                {
                    // 配置 css 加载器
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    // 配置 less 加载器
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
            ]

// 配置 scss 加载器
1. npm install sass-loader node-sass -D

2. 
   {
                    // 配置 scss 加载器
                   test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }

//  安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
1. npm install postcss-loader autoprefixer -D

2. 在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");

module.exports = {
    plugins:[ autoprefixer ]
}

3. 配置规则：更改webpack.config.js的module中的rules数组
{
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader   新加个 postcss-loader
                use:['style-loader','css-loader','postcss-loader']
            },
                
// 加载样式表中的图片以及字体文件
在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件

1. npm install url-loader file-loader -D

2. 配置规则：更改webpack.config.js的module中的rules数组
    {
                // 图片的格式 或 字体的格式
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            }

// 打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包
A.安装babel转换器
    npm install babel-loader @babel/core @babel/runtime -D
B.安装babel语法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置规则：更改webpack.config.js的module中的rules数组
{
                // 配置 js 高级语法 
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }

11. Vue 单文件组件

每一个Vue单文件组件都由三部分组成
1).template组件组成的模板区域
2).script组成的业务逻辑区域  注意： 只有在 script 这里面才会使用 this  因为 this 具有指向问题
3).style样式区域

<template>
    <div>
        这是 Home 根组件
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    created() {

    },

    methods:  {

    },
    // 计算属性
    computed: {},
} 
</script>

// scoped 防止 css 重叠
<style lang="less" scoped>

</style>

12. webpack 配置 vue 加载器

1. npm install vue-loader vue-template-compiler -D

2. 配置规则：更改webpack.config.js的module中的rules数组
    const VueLoaderPlugin = require("vue-loader/lib/plugin");
    const vuePlugin = new VueLoaderPlugin();
    
    // 添加plugins信息， 加载 vue 文件 vuePlugin
    plugins: [ htmlPlugin, vuePlugin ],
        
    // rules 里面添加如下代码
    {
                test:/\.vue$/,
                loader:"vue-loader",
            }

13. 在webpack中使用vue

1. npm install vue -S

2. // 在 webpack 中使用 vue 
import Vue from 'vue'
// 导入 vue 根组件
import App from './component/App.vue'

const vm = new Vue({
    el: '#app',
    render: h => h(App)
})

14. 打包发布

// 配置package.json  添加 "build":"webpack -p"
    "scripts":{
        "dev":"webpack-dev-server",
        "build":"webpack -p"
    }

// 然后用 npm run build 打包项目   打包后会生成 dist 文件夹  这只是测试打包