前端工程化：es6模塊化規(guī)范 和 webpack 配置

Commen.js 模塊化規(guī)范

// es6 模塊化規(guī)范中定義
// 1. 每個 js 文件都是獨立的
// 2. 導(dǎo)入模塊化成員使用 import 關(guān)鍵字
// 3. 暴露模塊化成員使用 export 關(guān)鍵字

1. 默認導(dǎo)出 和 默認導(dǎo)入

// export default { }  mm1.js

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

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

// 默認導(dǎo)出
export default {
    a,
    b,
    show
}

// 只能有一個默認導(dǎo)出  有兩個的話控制臺會報錯
// export default {
//     c
// }


// 默認導(dǎo)入 index.js
import mm from './mm1.js'
console.log(mm)

2. 按需導(dǎo)出 和 按需導(dǎo)入

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

// 按需導(dǎo)入  index.js   
// 按需導(dǎo)入重命名 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. 直接導(dǎo)入 并 執(zhí)行模塊里面的代碼

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

// 直接導(dǎo)入并執(zhí)行模塊里面的代碼  index.js
import './mm2.js'

4. webpack 的基本使用

// 1. 新建項目空白目錄决摧，并運行 npm init -y 命令国裳，初始化包管理配置文件 package.json
// 2. 新建 src 源代碼目錄
// 3. 并在文件夾中創(chuàng)建index.html文件 和 index.js文件

5. 在項目中安裝和配置 webpack

// package.json   項目運行的網(wǎng)頁
// 安裝 webpack 
npm install webpack webpack-cli -D

// 在項目根目錄中，創(chuàng)建一個 webpack.config.js 的配置文件用來配置webpack
// webpack.config.js  代碼如下    mode 是編譯模式
module.exports = {
    mode:"development" //development(開發(fā)模式) production(發(fā)布模式)
}

// 修改項目中的 package.json 文件添加運行腳本dev霎迫，如下：
"scripts":{
    "dev":"webpack"
}

// 運行終端命令：npm run dev
// 將會啟動webpack進行項目打包

// 打包完成后 根目錄會有 dist 文件夾

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

// package.json   項目運行的網(wǎng)頁
在webpack 4.x中惶室，默認會將src/index.js 作為默認的打包入口js文件
                 默認會將dist/main.js 作為默認的打包輸出js文件
                 
如果不想使用默認的入口/出口js文件温自，我們可以通過改變 webpack.config.js 來設(shè)置入口/出口的js文件，如下：
// 導(dǎo)入 node.js 的路徑 pah
const path = require("path");

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

7. webpack 自動打包配置

// package.json   項目運行的網(wǎng)頁
// 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皇钞，進行打包

注意： 這里會出現(xiàn)  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生成一個預(yù)覽頁面

我們訪問默認的 http://localhost:8080/的時候，看到的是一些文件和文件夾鹅士，想要查看我們的頁面
還需要點擊文件夾點擊文件才能查看，那么我們希望默認就能看到一個頁面惩坑，而不是看到文件夾或者目錄掉盅。
實現(xiàn)默認預(yù)覽頁面功能的步驟如下：

// package.json   項目運行的網(wǎng)頁

    1.安裝默認預(yù)覽功能的包:html-webpack-plugin
        npm install html-webpack-plugin -D

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

        //創(chuàng)建對象
        const htmlPlugin = new HtmlWebpackPlugin({
            //設(shè)置生成預(yù)覽頁面的模板文件
            template:"./src/index.html",
            //設(shè)置生成的預(yù)覽頁面名稱
            filename:"index.html"
        })
        
    3.繼續(xù)修改 webpack.config.js 文件以舒，添加plugins信息：
        module.exports = {
            ......
            plugins:[ htmlPlugin ]
        }

9. 自動打開瀏覽地址

// package.json   項目運行的網(wǎng)頁

"scripts": {
    ......
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },
      
// --open 表示 自動彈開 網(wǎng)頁  --host 127.0.0.1 表示地址 --port 8888  表示 端口號

10. webpack 加載器

通過loader打包非js模塊：默認情況下趾痘，webpack只能打包js文件，如果想要打包非js文件蔓钟，需要調(diào)用loader加載器才能打包
    loader加載器包含：
        1).less-loader
        2).sass-loader
        3).url-loader:打包處理css中與url路徑有關(guān)的文件
        4).babel-loader:處理高級js語法的加載器
        5).postcss-loader
        6).css-loader,style-loader

// package.json   項目運行的網(wǎng)頁
// 注意版本問題  配置 css 加載器
1. npm install style-loader css-loader -D

2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        // 配置 css 加載
        module : {
            rules:[
                {
                    //test設(shè)置需要匹配的文件類型永票，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調(diào)用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }

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

2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
      rules:[
                {
                    // 配置 css 加載器
                    //test設(shè)置需要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調(diào)用的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. 在項目根目錄創(chuàng)建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");

module.exports = {
    plugins:[ autoprefixer ]
}

3. 配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
{
                //test設(shè)置需要匹配的文件類型滥沫，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調(diào)用的loader   新加個 postcss-loader
                use:['style-loader','css-loader','postcss-loader']
            },
                
// 加載樣式表中的圖片以及字體文件
在樣式表css中有時候會設(shè)置背景圖片和設(shè)置字體文件侣集，一樣需要loader進行處理
使用url-loader和file-loader來處理打包圖片文件以及字體文件

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

2. 配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    {
                // 圖片的格式 或 字體的格式
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設(shè)置字節(jié)數(shù)，只有小于limit值的圖片兰绣，才會轉(zhuǎn)換
                //為base64圖片
                use:"url-loader?limit=16940"
            }

// 打包js文件中的高級語法：在編寫js的時候世分，有時候我們會使用高版本的js語法
有可能這些高版本的語法不被兼容，我們需要將之打包為兼容性的js代碼
我們需要安裝babel系列的包
A.安裝babel轉(zhuǎn)換器
    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.在項目根目錄創(chuàng)建并配置babel.config.js文件
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
{
                // 配置 js 高級語法 
                test:/\.js$/,
                use:"babel-loader",
                //exclude為排除項缀辩，意思是不要處理node_modules中的js文件
                exclude:/node_modules/
            }

11. Vue 單文件組件

每一個Vue單文件組件都由三部分組成
1).template組件組成的模板區(qū)域
2).script組成的業(yè)務(wù)邏輯區(qū)域  注意： 只有在 script 這里面才會使用 this  因為 this 具有指向問題
3).style樣式區(qū)域

<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. 配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    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'
// 導(dǎo)入 vue 根組件
import App from './component/App.vue'

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

14. 打包發(fā)布

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

// 然后用 npm run build 打包項目   打包后會生成 dist 文件夾  這只是測試打包