# fed-e-part-module-4

**Repository Path**: igor-rub/fed-e-part-module-4

## Basic Information

- **Project Name**: fed-e-part-module-4
- **Description**: 模块4作业
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-25
- **Last Updated**: 2020-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-part-module-4

#### 介绍
模块4作业

0. 运行webpack命令，会在项目中寻找webpack的配置文件。

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

流程
1. 从项目的entry人口开始构建项目，通过配置文件来制定该入口。也可以配置多个入口文件来一块构建

2. 找到入口后，webpack只能识别js文件，通过配置不同的loader来转化为webpack认识的模块，比如图片转化为路径，或base64文件。对不同技术项目进行不同的处理

3. 通过plugins来配置 转化文件外的功能，比如启动一个本地服务开发项目或是构建项目中，自动删除文件，自动复制文件等操作。

4. 转化完的代码，通过output指定文件的的输出入口，将不同技术的文件打包成浏览器可以识别的静态资源文件。

5. webpack会递归的的处理每一个模块，形成一个依赖图，然后通过__webpack_require__来加载不同的函数

2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。


loader用于转化webpack不认识的文件，不如vue文件，通过vue-loader转化为webpakc认识的文件，

## 自定义loader md_loader

const { sources } = require("webpack")
const marked = require('marked')

const showdown = require('showdown')
const converter = new showdown.Converter();
module.exports = source => {
    console.log('11', source)
    const html = converter.makeHtml(source);
    // const html = marked(source)
    return ` module.exports = ${JSON.stringify(html)}`
}

plugin用于处理loader意外的自动化任务，可以自动执行脚本来执行不同的任务，具有文件处理能力。

## 自定义pluin
class myPlugin {
    apply(comoiler) {
        console.log('🚀超级plunins')
        // compliation 打包上下文
        comoiler.hooks.emit.tap('myPlugin', compliation => {
            for (const key in compliation.assets) {
                if (key.endsWith('.js')) {
                    const contents = compliation.assets[key].source()
                    const withComments = contents.replace(/\/\*\*+\*\//g, '')
                    compliation.assets[key] = {
                        source: () => withComments
                    }
                }
            }
        })
    }
}
### 构建vue项目脚手架

0. 安装依赖

 yarn add babel babel-eslint babel-loader clean-webpack-plugin copy-webpack-plugin css-loader eslint eslint-config-standard  file-loader  html-webpack-plugin less less-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin postcss-loader style-loader  url-loader vue-loader  vue-template-compiler  webpack  webpack-cli webpack-dev-server webpack-merge -D

1. 确定项目类型和源码结构

vue项目的基本结构已经给出，那么先配置入口文件

entry: {
        main: './src/main.js'
    },

2. 搭建运行，打包环境

### 配置基本环节

基本环节，不区分打包和运行，两者通用，在这里需要配置vue的loader，图片，字体的loader，还有HtmlWebpackPlugin来启动我们的项目。


    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'img/',
                        limit: 5000,
                        esModule: false
                    }
                }
            },
            {
                test: /\.(eot|ttf|svg)$/,
                use: {
                    loader: 'file-loader'
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            BASE_URL: '"/"'
        }),
        new VueLoaderPlugin(),
        new ESLintPlugin({
            // 使用 path.join(__dirname, 'src') 报错
            files: 'src',
            extensions: ['js', 'vue']
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            title: 'webpack-vue-app'
        })
    ]
### 配置开发环境

通过HotModuleReplacementPlugin来进行热更新，配置less-loader来编译less，配置vue-loader来编译

const devConfig = {
    mode: 'development',
    devServer: {
        contentBase: '/',
        open: true,
        port: 8080,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    'style-loader', 
                    'css-loader', 
                    'less-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

### 配置打包环境

配置项目的出口文件，挤一挤要打包处理些一些loader，专门用于打包环境使用。

output: {
        path: __dirname + "/dist",
    },
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [{ from: "public" }],
        }),
        new MiniCssExtractPlugin(),
        new OptimizeCssAssetsWebpackPlugin(),
    ],