Web工程化 （webpack）

webpack 是什么？

一个前端打包器。

webpack 只识别javascript. 所以需要安装nodejs环境。

那么打包webpack 步骤是怎样的呢？

通过  npmjs.co  网站可以搜索依赖包

1. 安装nvm nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网   nvm 用来管理不同版本的nodejs

2. nvm --version 检查nvm 是否安装成功

3.nvm list  available  查看所有可以安装的nodejs

4.nvm list    检查所有的版本

5.nvm install 版本  安装指定的版本nodejs

6. nvm unstall xxx   表示卸载依赖

7. nvm use 版本  使用哪个版本

8.node -v    显示nodejs 的版本

9.npm -v 显示包管理器的版本

 成功显示后就可以开始对工程进行打包了！！！！

打包过程就是把文件打包成dist

1.创建一个web工程文件

2. 在该文件下cmd打开    输入npm init -y

3.下载淘宝镜像  输入 npm config set registry https://registry.npmmirror.com/

4.安依赖 npm install webpack webpack-cli --save-dev    (在开发环境中的)

5.手动创建webpack.config.js文件配置 webpack.config.js   手动添加入口文件

6.写入src文件   （写js,css html）

7.npx webpack --config webpack.config.js  (或者npm run build配置过的命令)   打包成dist  , 这样七步下来就可以生成dist 文件，将其部署到服务器就成功啦

注意！！

再次生成web工程  
复制之前的package.json   webpack.config.js等  建src目录   可以修改package.json 的name
下依赖时cmd再执行 npm i  就行(会自动下载node_modules和其他文件，自动检索依赖)

注意！！

 jquery bootstrap 这些直接 npm install jquery   npm install bootstrap@4 下载
 而 css和js压缩 需要下载  ，引入加上配置

 修改了config文件，需要终止  ctrl + c 再启动

 webpack 打包环节遇到的问题

1.安装时尽量是采用默认路径，减少出错

2.下载依赖包出现网络问题，下载慢 （配置淘宝镜像）    在终端输出以下命令

npm config set registry https://registry.npm.taobao.org

恢复

npm config set registry https://registry.npmjs.org

webpack 如何使用？

1.安装nodejs环境

2.构建项目下载webpack 所需的依赖

3.创建目录   打开终端    npm install webpack webpack-cli --save-dev

4.创建公共文件  配置  webpack.config.common.js

5.分离开发环境 和生成环境

webpack.config.dev.js         webpack.config.prod.js

6.在公共文件应该配置哪些选项    

（入口文件   插件    loader [css/ less / scss / 图片]   打包模式   ....）

7.在package.json 文件配置脚本

 "scripts": {
    "build": "npx webpack --config webpack.config.js",
    "dev": "npx webpack  serve --config webpack.config.dev.js",
    "serve": "npx webpack  serve --config webpack.config.dev.js",
    "start": "npx webpack  serve --config webpack.config.dev.js",
    "prod": "npx webpack --config webpack.config.prod.js"
  },

8.  在src里写入口文件   以及css  js   图片  ，将其引入入口文件

 公共文件   webpack.config.common.js

// 导入path模块
const path = require('path');
// 处理html模板的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除冗余文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 分离css文件（提取css代码）
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 配置
const option = {
    // 入口文件
    entry: {
        index: "./src/index.js"
    },
    // 打包模式
    // development: 开发环境
    // production: 生产环境
    // mode: "production",

    // 输出目录
    output: {
        // 设置输出的目录
        path: path.resolve(__dirname, 'dist'),
        // 设置输出的js文件
        filename: 'js/boundle-[hash].js',
    },
    // 配置loader (加载器)
    module: {
        rules: [

            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "",
                        },
                    },
                    "css-loader"
                ],
            },

            {
                test: /\.less$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    "css-loader",
                    "less-loader",
                ],
            },

            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 把js样式对应的脚本写入bundle.js文件
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    // 把css转换成js
                    "css-loader",
                    // 编译sass成css
                    "sass-loader",
                ],
            },

            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 超出8kb,就不转换成base64格式
                            // 限制  小于等于8kb的图片，做成base64格式
                            // 8192/1024 = 8kb
                            limit: 8192,
                            // 禁用严格模式
                            esModule: false,
                            // 设置输出的文件路径
                            // outputPath: 'images',
                            name: './images/[name]_[hash].[ext]',
                        },
                    },
                ],
            },


        ],
    },

    // 配置插件
    plugins: [
        // 设置模板
        new HtmlWebpackPlugin({
            title: "主页",
            template: "./src/index.html",// 模板路径
            filename: 'index.html',// 输出html的文件名称
            inject: "head",// 插入脚本的位置
            chunks: ['index'],// 插入哪些脚本文件
        }),
        // 清理冗余文件
        new CleanWebpackPlugin(),
        // 提取css
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
        })
    ]
}
// 配置选项 (暴露)
module.exports = option;

webpack.config.dev.js   开发环境

// 开发环境
const common = require("./webpack.config.common");
const path = require("path");
// 导入合并模块的包
const { merge } = require("webpack-merge");
// const webpackDevServer = require('webpack-dev-server');

// 配置开发环境
module.exports = merge(common, {
    mode: "development",
    // 开启http服务
    devServer: {
        // 设置需要运行目录
        // static: "./dist",
        static: path.resolve(__dirname, 'dist'),
        // 设置服务的端口
        port: 8080,
        // 自动打开页面
        open: true,
        // 设置保存更新页面
        hot: true,

        // 旧版本
        // proxy: {
        //     "/api": {
        //         // 目标
        //         target: "https://www.gaokaozhitongche.com",
        //         // // 设置跨域
        //         // changeOrigin: true,
        //         // // 设置重载
        //         // pathRewrite: {
        //         //     "^/api": ""
        //         // }
        //     }
        // }


        // 提供数据的服务器地址：
        // 后台
        // http://localhost:3000/test

        // 前端
        // http://localhost:8080

        // 通过修改url
        // http://localhost:8080/api/test
        // http://localhost:8080/test

        // 新版本
        proxy: [
            // {
            //     context: ['/', '/xpi'],
            //     target: 'http://localhost:3000',
            // },
            {
                context: ['/', '/api'],
                target: 'https://www.gaokaozhitongche.com',
                secure: false,
                changeOrigin: true,
            },
        ],
    }


    // 别人的后台
    // https://www.gaokaozhitongche.com
    // https://www.gaokaozhitongche.com/api/v2/ranks/index-top3

    // 我的前端
    // http://localhost:8080

    // 做网络代理后
    // http://localhost:8080/api/v2/ranks/index-top3
})

 webpack.config.prod.js   生产环境

// 生产环境
const common = require("./webpack.config.common");
// 导入合并模块的包
const { merge } = require("webpack-merge");
// 导入用于压缩css代码的依赖包
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 移除console.log代码
const TerserPlugin = require("terser-webpack-plugin");
// 配置生产环境
module.exports = merge(common, {
    mode: "production",
    //优化项目代码
    optimization: {
        // 是否压缩代码
        minimize: true,
        // 去除console.log()代码
        minimizer: [
            // 是否删除调试程序的代码
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        // 是否删除项目中的console.log()
                        drop_console: true
                    }
                }
            }),
            // 用于css代码压缩
            new CssMinimizerPlugin()
        ],
    },

})