02-02模块化作业

模块化开发与规范化标准

一、简答题
1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。
1.初始化项目 B V
2.根据命令窗口添加或者webpack.config.js中的配置来初始化
3.配置entry、output、Loader 、Plugin 等
4.执行打包命令
核心：一个项目中会有各种的资源文件，webpack会根据配置找到其中的一个入口文件，一般是一个javascript文件，通过require、import等解析依赖的资源模块，会整理成一个依赖关系树，webpack会递归依赖树，找到每个节点对应的资源文件，再根据配置文件中的rules属性找到这个模块所对应的加载器，然后交给加载器去加载模块，最后将加载后的结果放在bundle中，从而完成打包。在打包过程中会用到各种的plugin插件，增强webpack自动化能力，例如clean-webpack-plugin 清除插件，是用来每次打包时的清除上次的打包文件等。

2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。
Loader是加载器，是在打包过程中应用的，webpack只能对javascript文件进行打包，对一些资源文件并不能，这就需要应用loader来进行转译，主要用在编译转化，文件操作，代码检查，常用的loader有：

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• image-loader：加载并且压缩图片文件
• babel-loader：把 ES6 转换成 ES5
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
• eslint-loader：通过 ESLint 检查 JavaScript 代码

Plugin是插件，主要是webpack在打包过程中，增强自动化能力，在不同的阶段有不同的插件，主要有：

• clean-webpack-plugin 清除插件
• html-webpack-plugin 自动生成html
• copy-webpack-plugin 拷贝那些不需要参与打包的资源文件到输出目录

开发Loader思路
1、可以在项目中直接创建一个例如markdown-loader.js，后期可以发布到npm
2、通过module.exports导出一个函数，就是对这个资源处理的过程
3、输入为加载到的资源（source），输出为得到的结果，输出必须为javascript代码，或者交给下一个loader处理
4、在webpack.config.js中配置，在module.rules，use[’./markdown-loader’]，可以写名称，也可以写路径

开发Plugin思路
1、plugin 是通过钩子机制实现的，在不同的事件节点上挂载不同的任务，相当于往钩子上挂载任务，这样就可以扩展一个插件
2、默认是一个函数或者是一个包含apply方法的对象
3、在方法内获取资源做响应处理
4、将处理完的资源返回AA

二、编程题
1、使用 Webpack 实现 Vue 项目打包任务
具体任务及说明：

先下载任务的基础代码 百度网盘链接: https://pan.baidu.com/s/1pJl4k5KgyhD2xo8FZIms8Q 提取码: zrdd

这是一个使用 Vue CLI 创建出来的 Vue 项目基础结构

有所不同的是这里我移除掉了 vue-cli-service（包含 webpack 等工具的黑盒工具）

这里的要求就是直接使用 webpack 以及你所了解的周边工具、Loader、Plugin 还原这个项目的打包任务

尽可能的使用上所有你了解到的功能和特性

作业要求

本次作业中的编程题要求大家完成相应代码后（二选一）

1. 简单录制一个小视频介绍一下实现思路，并演示一下相关功能。
2. 提交一个项目说明文档，要求思路流程清晰。

最终将录制的视频或说明文档和代码统一提交至作业仓库。

webpack项目
1、npm install
2、安装webpack
npm install webpack webpack-cli --dev
3、webpack.common.js基础内容

const path = require('path')

module.exports = {
    mode: 'none',
    entry: './src/main.js', //入口文件
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/bundle.[contenthash:6].js' // 设置hash值 并将文件放置在dist/js下
    }
}

4、配置package.json文件，运行打包 npm run build

"scripts": {
        "build": "webpack --config webpack.common.js",
        "webpack": "webpack --version"
    },

5、打包报错，安装npm inatall vue-loader vue-template-compiler --dev ,
安装完运行打包，还报错，网查因为vue-loader的版本是15以上的原因，添加

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins: [
        new VueLoaderPlugin()
    ]

6、解析less文件，安装 npm install less-loader -dev
报错 ./src/style.less 39 bytes [not cacheable] [built] [code generated] [1 error]
安装 npm install less less-loader style-loader css-loader -dev

{
                test: /\.less$/,
                // use: [{
                //     loader: 'less-loader'
                // }]
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }

7、解析图片资源
npm install url-loader file-loader --dev

{
                test: /\.(png|jpe?g|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        esModule: false, //添加后图片正常显示
                        name: 'img/[name].[contenthash:6].[ext]', //随机数
                        limit: 10 * 1024 //超出的就用file-loader
                    }
                }
            }

8、解析css文件
npm install css-loader style-loader --dev

{
                test: /\.css$/,
                use: [ //从后往前执行，先用到的要放到后边
                    'style-loader',
                    'css-loader'
                ]
            }

9、解析js文件
npm install babel-loader @babel/core @babel/preset-env @vue/cli-plugin-babel eslint-loader -dev

{
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }]
            }

10、打出来的dist包里边的内容不会清除
安装 npm install clean-webpack-plugin --dev
导入 const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
11、安装 npm install html-webpack-plugin
npm install copy-webpack-plugin --dev
运行报错Template execution failed: ReferenceError: BASE_URL is not defined
index.html中的
改为
12、图片报错html里边的img的src[object Module]问题
解决：esModule: false, //添加后图片正常显示

运行npm run build，正常打包

13、配置webpack.dev.js

"serve": "webpack-dev-server --online --config webpack.dev.js",

安装webpack-merge

const {
    merge
} = require('webpack-merge') //必须merge这种写法，否则报错

安装 webpack-dev-server
14、运行 npm run serve 报错，降低了webpack-cli版本，降到3,成功运行
15、安装npm install eslint-loader --save-d
运行报错，安装npm install eslint --save-d解决

16、配置webpack.prod.js

webpack.common.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    mode: 'none',
    entry: './src/main.js', //入口文件
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/bundle.[contenthash:6].js' // 设置hash值 并将文件放置在dist/js下
    },
    module: {
        rules: [{
                test: /\.less$/,
                // use: [{
                //     loader: 'less-loader'
                // }]
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        esModule: false, //添加后图片正常显示
                        name: 'img/[name].[contenthash:6].[ext]', //随机数
                        limit: 10 * 1024 //超出的就用file-loader
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ //从后往前执行，先用到的要放到后边
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    },
                    'eslint-loader'
                ]
            }
        ]

    },
    plugins: [
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'vue',
            template: './public/index.html',
            filename: 'index.html' //输出的文件
        }),
        new CopyWebpackPlugin({
            patterns: ['./src/assets/**', 'public'] //拷贝assets和public
        })
    ]
}

webpack.dev.js

const commonConfig = require('./webpack.common')
const {
    merge
} = require('webpack-merge')
const path = require('path')

module.exports = merge(commonConfig, {
    mode: 'development', //开发环境
    devtool: "cheap-module-source-map",

    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 9000,
        hot: true, //热加载
        open: true, //自动拉起
        inline: true //实时刷新
    }
})

webpack.prod.js

const commonConfig = require('./webpack.common')
const {
    merge
} = require('webpack-merge')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')

const path = require('path')


module.exports = merge(commonConfig, {
    mode: 'production',
    devtool: 'nosources-source-map',

    optimization: {
        usedExports: true, // 标记未引用代码
        minimize: true, //移除未使用代码
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
    ]
})