模块化的发展

webpack的了解

webpack是什么

webpack本身是基于node.js开发的用来打包文件的工具
我们可以根据文档自己配置和修改按需打包规则

为啥要使用webpack


/*
-   代码转换：TypeScript编译成JavaScript、LESS/SCSS编译成CSS、ES6/7编译为ES5、虚拟DOM编译为真实的DOM等等…
-   文件优化：压缩JS、CSS、HTML代码，压缩合并图片，图片BASE64等
-   代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码等
-   模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件
-   自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器
-   代码校验：Eslint代码规范校验和检测、单元测试等
-   自动发布：自动构建出线上发布代码并传输给发布系统
*/

基础配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    /* 基础配置 */
    mode: 'development',//模式 生产环境还是开发环境
    entry: './src/main.js',//入口文件
    output: {//打包后的文件
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    /* 使用插件 */
    plugins: [
        new HtmlWebpackPlugin({
            // 把指定的页面作为模板进行编译
            template: './public/index.html',
            // 输出的文件名
            filename: 'index.html',
            // 如果输出JS/CSS没有设置HASH规则，则此处开启，这样会在导入资源的末尾加上“?哈希值”，来清除强缓存的影响
            hash: true,
            // 设置导入文件的路径前缀「例如设置：./ 或者 CDN地址(http://cdn.xx.com/)」
            publicPath: './'
        }),
        /*清除打包目录文件*/
        new CleanWebpackPlugin()
    ],
    /* 使用加载器 */
    module: {
        rules: [{
            test: /\.(css|less)$/,
            use: [
                "style-loader", //把CSS插入到HEAD中
                "css-loader", //编译解析@import/URL()这种语法
                "postcss-loader", //设置前缀，根据浏览器兼容列表browserlist，自动设置样式前缀，以此实现浏览器的兼容处理
                "less-loader"//把less编译为css
            ]
        }, {
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        "@babel/preset-env"
                    ]
                }
            }],
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
        }]
    },
    /* 启动本地服务进行项目预览 && 配置跨域代理 「开发环境需要、生产环境不需要」*/
    devServer: {
        // 显示编译进度
        compress: true,
        // 设置域名
        host: '127.0.0.1',
        // 设置端口号
        port: 8080,
        // 开启热更新
        hot: true,
        // 编译完成自动打开浏览器
        open: true,
        // 配置跨域代理
        //   + “/api 前缀”一般是用来区分代理到哪一台服务器；但是前缀本身在真正的请求地址中可能并不存在，所以在区分服务器后，真正发送请求的时候，我们需要把前缀去掉!!
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:9999',
                changeOrigin: true,
                ws: true,
                pathRewrite: { '^/api': '' }
            },
            '/zhihu': {
                target: 'https://www.zhihu.com',
                changeOrigin: true,
                ws: true,
                pathRewrite: { '^/zhihu': '' }
            }
        }
    }
};

前端框架学习

模块化的发展

webpack的了解