Vue webpack部分（3）

第一章 webpack

.1 为什么使用 webpack

• webpack 和 gulp 对比
• webpack 依赖环境

1.2 配置 webpack 文件

1. 下载 webpack 文件

//  先下载nodejs 然后在 cmd 中
npm install webpack@5.0.0 -g
// 查看webpack版本
webpack -version
// 安装淘宝镜像
npm config set registry https://registry.npm.taobao.org

2. 终端配置 webpack 文件

npm install webpack@5.0.0 --save-dev

3. 配置 base.config.js 文件

/* 动态获取 path 路径 */
const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        /* 动态获取路径 */
        /* __dirname : 绝对路径 */
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // 让对应的文件前加上dist/
        // publicPath: 'dist/',
    },
}

4. 终端配置 package.json 初始化文件

npm init

1.3 webpack 的 loader

1. css 文件处理

• 终端配置文件下载

// 负责将 css 文件进行加载
npm install --save-dev css-loader
// 将样式加载到DOM中
npm install --save-dev style-loader

• 配置 base.config.js 文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
}

2. less 文件处理 less-loader

• 终端配置文件下载

npm install less less-loader --save-dev

• 配置 base.config.js 文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                loader: 'less-loader', // compiles Less to CSS
            },
        ],
    },
    resolve: {
        /* extensions 可以省略后缀名 */
        extensions: ['.js', '.css', '.vue'],
    },
}

3. 图片文件处理 url-loader

• 终端配置文件下载

// 当文件小于该limit时
npm install url-loader --save-dev
// 当文件大于该limit时
npm install file-loader --save-dev

• 配置 base.config.js 文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 当加载的图片, 小于 limit 时，会将图片编译成base64字符串形式
                            limit: 8192, // 1024 * 8KB = 8192

                            /* 配置图片名字 */
                            // [hash:8] : 8位哈希
                            // [ext] : 文件后缀名
                            name: 'img/[name].[hash:8].[ext]',
                        },
                        // 当加载的图片, 大于 limit 时，需要配置 file-loader 模块进行加载
                        // loader: 'file-loader',
                    },
                ],
            },
        ],
    },
}

4. ES6 ==> ES5 的 babel-loader

• 终端配置文件下载

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

• 配置 base.config.js 文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.m?js$/,
                // exclude : 排除
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015'],
                    },
                },
            },
        ],
    },
}

1.4 webpack 中配置 Vue

1. 引入 Vue.js

• 终端配置文件下载

// npm 安装 Vue.js
npm install vue --save

• 其他 js 文件直接引入

/* 其他 js 文件直接引入 */
import Vue from 'vue'
const App = {
    template: `
    <div>
        <h2>{{ message }}</h2>
        <button v-on:click="btnClick">按钮</button>
    </div>
    `,
    data() {
        return {
            message: 'hello',
        }
    },
    methods: {
        btnClick() {
            console.log('hello')
        },
    },
}
new Vue({
    el: '#app',
    template: '<App/>',
    components: {
        App,
    },
})

• 配置 base.config.js 文件

module.exports = {
    // 链接 Vue
    resolve: {
        // alias : 别名
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
    },
}

2. 引入 App.vue 文件

• 终端配置文件下载

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

• App.vue 文件

<template>
    <div>
        <h2>{{ message }}</h2>
        <button v-bind:click="btnClick">按钮</button>
    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                message: 'hello',
            }
        },
        methods: {
            btnClick() {
                console.log('hello')
            },
        },
    }
</script>

<style scoped>
    .title {
        color: aqua;
    }
</style>

• 配置 base.config.js 文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader'],
            },
        ],
    },
}

1.5 webpack 中的 plugin

1. 配置 plugin

• 终端配置文件下载

npm install html-webpack-plugin --save-dev

• 配置 base.config.js 文件

const webpack = require('webpack')

module.exports = {
    /* 添加横幅 */
    plugins: [new webpack.BannerPlugin('最终版权所有')],
}

2. 打包 html 的 plugin

• 配置 base.config.js 文件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        /* 添加 index.html 到 dist */
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),
    ],
}

3. js 压缩的 plugin(使用第三方插件 uglifyjs)
   注意：开发阶段勿用，发布阶段可使用

• 终端配置文件下载

npm uglifyjs-webpack-plugin@1.1.1 --save-dev

• 配置 base.config.js 文件

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    plugin: [new UglifyjsWebpackPlugin()],
}

1.6 搭建本地服务器

终端配置文件下载

npm install --save-dev webpack-dev-server@2.9.3

配置 base.config.js 文件

module.exports = {
    devServer: {
        contentBase: './dist',
        inline: true,
    },
}

终端运行服务器

// 1. 相对路径(have err!)
// ./node_modules/.bin/webpack-dev-server
// 2. package.json中添加
"script":{
    "dev":"webpack-dev-server --open"
}

1.7 webpack 配置文件的分离

1. base.config.js (基本的代码)
2. prod.config.js (生产部分代码)
3. dev.config.js (开发时的代码)

将两个配置文件合并

npm install webpack-merge --save-dev

配置 prod/dev.config.js 文件

const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig, {})

修改 package.json 文件

 "scripts": {
    "build": "webpack --config ./build/prod.config.js",
    "dev":"webpack-dev-server --open --config ./build/dev.config.js"
  },