webpack-基础知识

Posted 2021-03-12 笛儿前端分享

一.webpack介绍

webpack是一个前端模块化工具,简单解释:webpack就是处理多个文件,根据设置的规则,对文件进行合并和修改.

我们把合并后的文件叫做模块.

经过webpack修改后的文件在运行时能够兼容更多的浏览器,代码体积更小,性能更好.

二.webpack规则设置

webpack的规则设置在webpack.config.js文件中.

但是!!!实际开发中,产品有多个环境比如开发环境/测试环境/线上环境,每个环境的配置规则都不同.显然只靠webpack.config.js这一个文件不能满足我们的需求,我们需要拆分webpack.config.js

通常webpack.config.js拆分为3个文件:

• base.config.js 公共配置
• dev.config.js 开发环境配置
• pro.config.js 生产环境/线上环境配置

 

有了这3文件,webpack.config.js文件就不需要创建了.

webpack执行时会默认查找webpack.config.js.但是我们可以通过修改package.json文件,让webpack执行时使用自定义配置的文件.package.json文件修改方法:

• scripts中的配置项 ---config:指定文件的配置项 --progress:显示文件打包的进度条
• dev:使用webpack-dev-server启动webpack,webpcak启动时读取规则配置项在config文件夹中的dev.config.js
• build:执行npm run build会打包生产环境的代码,webpcak启动时读取规则配置项在config文件夹中的pro.config.js
• 这里没有设置base.config.js的链接,base.config.js是基础配置,要在dev.config.js和pro.config.js中引用

2.1 dev.config.js

通常dev文件用于配置公共规则

2.1.1 dev.config.js基础配置

这里列举了一些常见的配置信息,包括处理scss,跨域等

const baseConfig = require("./base.config");

//webpack-merge用于合并webpack位于不同文件的配置(数组或对象格式适用)

const webpackMerge = require("webpack-merge");
const path = require("path");

//合并
const config = webpackMerge(baseConfig, {
    /*
        mode内容webpack提供2种选择:development/production.
        每种选择webpcak都会提供的对应的默认配置
        参考网站https://segmentfault.com/a/1190000013712229?utm_source=tag-newest
    */
    mode: "development",
     /*
            devtool帮助调试,提供几种方法,将压缩或编译后的文件的代码映射回源文件中原始位置
            module.rules允许你在webpack中配置多个loader
        */
    devtool:"cheap-module-eval-source-map",
    module: {     
        rules: [
            {
                test: /.(css|scss)$/,
                //cssloader的执行顺序 从右到左 从下到上
                use: ["style-loader", "css-loader", "sass-loader"],
                //排除文件
                exclude: path.join(__dirname, "../node_modules")
            }
        ]
    },
    //服务器的配置项
    devServer: {
        //自动打开浏览器
        open: true,
        //设置端口号
        port: 9001,
        //找不到界面就默认设置
        historyApiFallback: {
            rewrites: [{
                from: /.*/g,
                to: ‘/index.html‘ //与output的publicPath有关(HTMLplugin生成的html默认为index.html)
            }]
        },
        //代理,处理跨域
        proxy:{
            /*
               请求地址是/api开头的时候,把请求地址代理到target设置的网址
               请求地址:域名后,问号前,比如:http://baidu.com/s?aa=1;/s是地址  ?后面是请求参数
               这种跨域不是一定成功如果有token验证就不行
            */
            "/api":{
                //代理目标点
                target:"https://app2.motie.com",
                //允许跨域代理
                changeOrigin:true,
                pathRewrite:{
                    "^/api":""
                }
            }
        }
    }
})


module.exports = config;