一周精通Vue（三）webpack、代碼抽離

webpack

webcpak的核心有兩個
一個是子產品化 讓我們可以進行子產品化開發，并且會幫助我們處理子產品之間的依賴關系
一個是打包  不僅僅是JavaScript文集 我們的css，圖檔，json檔案等 在webpack中都可以被當做子產品來使用

node -v 首先安裝node 我這裡安裝的是10.15.3

# 全局安裝webpack
npm install [email protected] -g
# 安裝項目依賴
npm install [email protected] -save-dev 
webpack -version  # 檢視webpack版本

打包

在終端運作webpack指令時 都是使用全局的webpack
如果使用項目webpack 需要配置devDependencies

# webpack 指令打包指定檔案  如果有依賴則自動繼承依賴打包
webpack ./src/main.js ./dist/bundle.js

配置

建立一個 webpack.config.js
npm init # 初始化package.json配置檔案 自動生成package.json檔案
npm install # 安裝package 自動生成 package-lock.json

// file: webpack.config.js

const path = require('path');

module.exports = {
    // 打包入口檔案
    entry: './src/main.js',
    // 出口檔案
    output: {
        // 出口檔案絕對路徑
        path: path.resolve(__dirname, './dist'),
        // 打包後的檔案名字
        filename: 'bundle.js'
    }
};

loader

官方連結：https://webpack.js.org/loaders

css樣式檔案

# 1. 安裝loader
npm install --save-dev css-loader
npm install --save-dev style-loader

const path = require('path');

module.exports = {
    // 打包入口檔案
    entry: './src/main.js',
    // 出口檔案
    output: {
        // 出口檔案絕對路徑
        path: path.resolve(__dirname, './dist'),
        // 打包後的檔案名字
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader 隻負責将css檔案加載
                // style-loader 負責将樣式添加到dom中
                // 這裡配置順序需要注意 是從後向前加載的
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};

less 樣式檔案

安裝 less-loader

npm install --save-dev less-loader less
img 圖檔檔案

安裝 url-loader

npm install --save-dev url-loader

安裝 file-loader

npm install --save-dev file-loader
ES6 -> ES5 文法處理

安裝babel-loader

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置Vue

安裝vue 添加運作時依賴

npm install vue --save
new Vue

// 使用vue進行開發
import Vue from 'vue'

const vm = new Vue({
    el: "#app",
    data: {
        msg: "Vue message!",
    },
    methods: {}
});

修改HTML

<div id="app">
    {{msg}}
</div>

runtime-orly

沒有template功能  代碼中 不能包含任何的template内容

runtime-compiler

擁有template 代碼中可使用 template代碼内容

解決runtime-orly報錯
```
指定runtime版本
           
```
配置webpack.config.js

resolve: {
        alias: {
            // 指定 在其他地方導入vue的時候 vue來自哪裡
            // 在node_modules/vue/dist/ 中 預設是 vue.runtime.esm.js 修改為 vue.esm.js
            'vue$': 'vue/dist/vue.esm.js'
        }
    }

el 和template的差別

如果在Vue執行個體中寫了 el 又寫了template 那麼 template會替換掉el挂載的元素

安裝 vue-loader

開發依賴

npm install vue-loader vue-template-compiler --save-dev

代碼抽離

src
├── css
│   ├── narmal.css
│   └── special.less
├── img
│   ├── Ink\ Cloud.jpg
│   └── timg.jpeg
├── js
│   └── demo.js
├── main.js
└── vue
│   ├── App.vue
│   └── Cpn.vue
│
└── index.html
│
└── package.json
│
└── webpack.config.js
│
└── dist
│
└── node_modules

// file：webpack.config.js
// 配置 loader

const path = require('path');

module.exports = {
    // 打包入口檔案
    entry: './src/main.js',
    // 出口檔案
    output: {
        // 出口檔案絕對路徑
        path: path.resolve(__dirname, './dist'),
        // 打包後的檔案名字
        filename: 'bundle.js',
        // 打包時動态修改檔案加載位址
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader 隻負責将css檔案加載
                // style-loader 負責将樣式添加到dom中
                // 這裡配置順序需要注意 是從後向前加載的
                use: ['style-loader', 'css-loader'],
            },

            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },

                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },

                    {
                        loader: "less-loader" // compiles Less to CSS
                    }
                ]
            },

            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 當加載圖檔時  檔案大小 小于limit時 會将圖檔編譯成base64字元串形式
                            // 當加載圖檔時  檔案大小 大于limit時 需要使用file-loader子產品進行加載
                            limit: 9999,
                            // 打包後檔案的命名規則
                            // [name] 檔案打包前的名字
                            // [hash:8] 截取8位hash值
                            // [ext] 擴充名
                            name: 'img/[name].[hash:8].[ext]'
                        },

                    }
                ]
            },

            {
                test: /\.js$/,
                // exclude 轉換的時候排除的内容
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },

            {
                test: /\.vue$/,
                // vueloader
                use: ['vue-loader']
            }
        ],
    },

    resolve: {
        alias: {
            // 指定 在其他地方導入vue的時候 vue來自哪裡
            // 在node_modules/vue/dist/ 中 預設是 vue.runtime.esm.js 修改為 vue.esm.js
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};

file：main.js

// 依賴js檔案
import {name, age} from "./js/demo";

console.log(name);
console.log(age);

console.log('webpack package test!!!!!!!!1');

// 依賴css檔案
require("./css/narmal.css");

// 依賴less檔案
require("./css/special.less")

document.write("<h1>前端謝廣坤！</h1>")

// 使用vue進行開發
// 導入vue
import Vue from 'vue'
// 依賴vue元件  .vue檔案
import App from './vue/App.vue'

const vm = new Vue({
    el: "#app",
    template: "<App/>",
    components: {
        App
    },

    methods: {}
});

file: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
</div>

<script src="./dist/bundle.js"></script>
</body>
</html>

file: App.vue

<template>
    <div>
        <h2>my name is cpn </h2>
        <button @click="butClick">按鈕</button>
        <h2>{{name}}</h2>
        <Cpn></Cpn>
    </div>
</template>

<script>
    import Cpn from './Cpn.vue'

    export default {
        name: "App",
        components: {
            Cpn
        },
        data() {
            return {
                message: 'Hello word!',
                name: 'coder why'
            }
        }
    }
</script>

<style scoped>

</style>

file:Cpn.vue

<template>
    <h1>大寫的Cpn</h1>
</template>

<script>
    export default {
        name: "Cpn"
    }
</script>

<style scoped>

</style>

一周精通Vue（三）webpack、代碼抽離

webpack

loader

配置Vue

代碼抽離

繼續閱讀

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題