webpack-基础知识

一.webpack介绍

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

正式说:webpack是一个模块化打包工具.从入口模块出发,识别源码中的模块化导入语句,递归的找出入口模块的所有依赖,将入口和所有依赖打包

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

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

webpack是基于node开发的,所以遵守commonjs模块规范

二.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,跨域等.

运行开发环境语句:yarn dev

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
            use:cssloader的执行顺序 从右到左 从下到上
            exclude:排除文件
        */
    devtool:"cheap-module-eval-source-map",
    module: {  
       //use中loader执行顺序是从右至左
        rules: [
            {
                test: /\.(css|scss)$/,
                use: ["style-loader", "css-loader", "sass-loader"],
                exclude: path.join(__dirname, "../node_modules")
            }
        ]
    },
    /*
        dev-server服务器的配置项,在package.json文件script-dev中设置了webpack-dev-server
        open:自动打开浏览器
        historyApiFallback:找不到界面时默认设置界面
    */
    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验证就不行
               target:代理目标点;changeOrigin为true表示允许跨域代理,pathRewrite值表示将/api替换为空
            */
            "/api":{
                target:"https://app2.motie.com",
                changeOrigin:true,
                pathRewrite:{
                    "^/api":""
                }
            }
        }
    }
})

//commonJS规范
module.exports = config;

2.2 base.config.js配置

公共配置

2.2.1 base.config.js基本配置

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

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

/* __dirname:当前文件的绝对路径 path.join：做路径的拼接 */ //配置webpack module.exports = { //入口的配置  entry: { app: path.join(__dirname, "../src/main.js") }, //出口配置,process.env.NODE_ENV用来判断是开发环境还是生产环境

module.exports = {

   entry:{

　　　　　　app:path.join(__dirname,"../src/main.js")

　　},

 output: { 
        path: path.join(__dirname, "../dist"),
 
        filename: process.env.NODE_ENV=="development"?"js/[name].[hash:8].js":"js/[name].js"
    },
    //使用插件配置项
    plugins: [
        /*
          HtmlWebpackPlugin:生成打包后的html入口文件
          title是打包后的html文件标题
          filename打包后的html文件名(设置hash名称[hash].html),
        */
        new HtmlWebpackPlugin({
            template: path.join(__dirname,"./public/index.html"),
            filename: "index.html"
        }),
        //每次打包前清除dist内的内容,重新生成
        new CleanWebpackPlugin(),
        //拷贝文件夹到dist中:context表示要拷贝的资源地址,from设置拷贝内容,to将静态资源拷贝到包中
        //如果不配置的话,打包不会包含public内的文件
        new CopyWebpackPlugin([
            {
                context: path.join(__dirname, "../public"),
                //**/*表示文件夹里的文件都可以拷贝
                from: "**/*",
                to: path.join(__dirname, "../dist"),
                //忽略public文件夹下的index.html
                ignore: ["index.html"]
            }
        ])
         //npm install -D vue-loader vue-template-compiler,在使用vue-loader的时候要先在plugin注册

          new VueLoaderPlugin();

    ],
    //别名的配置项
    resolve: {
        //文件引入的优先级,比如import a from './a',查找优先级为:a.js,a.scss,a.art...
        extensions: [".js", "scss", "art", "css", "json"],
        //别名的配置,相当于给不同的路径起简称
        alias: {
            "@": path.join(__dirname, "../src"),
            "view": path.join(__dirname, "../src/view"),
            "controller": path.join(__dirname, "../src/controller"),
            "lib": path.join(__dirname, "../src/lib"),
            "router": path.join(__dirname, "../src/router"),
            "styles": path.join(__dirname, "../src/styles"),
            "api":path.join(__dirname,"../src/api"),
            "model":path.join(__dirname,"../src/model"),
            "utils":path.join(__dirname,"../src/utils")
        }
    },
   //module.rules内配置loader内部的规则,这些loader不需要的不用下载和配置
    module: {
        rules: [

             {

                test:/\.vue$/,

                loader:"vue-loader"

             },

            //一个对象代表一个规则,匹配.js的使用babelloader,排除modules,使用时注意下载相关依赖
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: path.join(__dirname, "../node_modules")
            },

            {
                //引入非模块化的插件
                test: require.resolve('zepto'),
                //转化成模块的方式
                loader: 'exports-loader?window.Zepto!script-loader'
            },
             //前端引擎模板
            {
                test: /\.art$/,
                loader: "art-template-loader"
            },
            {
                /*
                    name是图片原始的名称  ext是文件的后缀名
                    url-loader一般用来解析一些体积小的图片,可以通过limit来设置图片大小,当图片大小超过limit的设置值,webpack会自动用file-loader解析s
                    yarn add url-loader file-loader -D
                */
                test: /\.(png|jpg|gif|svg)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 2048,
                        name: "img/[name].[ext]"
                    }
                },
                exclude: path.join(__dirname, "../node_modules")
            },
            //处理字体的配置项
            {
                test: /\.(woff|woff2|svg|ttf|eot)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: "font/[name].[ext]"
                    }
                },
                exclude: path.join(__dirname, "../node_modules")
            }
        ]
    }
}

2.2.2 babel-loader的额外配置

babel相关loader要想正确使用,还需要在根目录下创建.babelrc文件,在该文件内做babel相关loader的配置

.babelrc文件:

//.babelrc文件是json格式
{
    "presets": [
        [
            //低版本的转换
            "@babel/preset-env",
            {
                //设置浏览器版本
                "targets":{
                    //兼容到所有浏览的最后2个版本
                    "browsers":["last 2 version"]
                }
            }
        ]
    ]
}

　　

　　

2.3 pro生产环境配置

也就是线上发布环境的配置

2.3.1 pro.config.js基本配置

const path = require("path");
const baseConfig = require("./base.config");
const webpackMerge = require("webpack-merge");
const ExtractTextWebpackplugin = require("extract-text-webpack-plugin");
const config = webpackMerge(baseConfig, {
    mode: "production",
    devtool:"cheap-module-source-map",
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                //css抽离,postcss需要额外配置
                //yarn add extract-text-webpack-plugin@next -D
                use:ExtractTextWebpackplugin.extract({
                    //解析css 和sass  postcss 用来加浏览器的前缀
                    use:[
                        {loader:"css-loader"},
                        {loader:"postcss-loader"},
                        {loader:"sass-loader"}
                    ],
                    fallback: "style-loader",
                }),
                exclude:path.join(__dirname,"../node_modules")
            }
        ]
    },
    plugins:[
        new ExtractTextWebpackplugin({
            //生产出来的文件名称
            filename:"css/[name].[hash:8].css"
        })
    ]
})

module.exports = config;

　　2.3.2 postcss配置

postcss用于给浏览器加前缀,需要在根目录下创建一个postcss.config.js文件,来扩展postcss配置

在pro.config.js文件中我们用到了postcss-loader所以在根目录下创建一个postcss.config.js文件,来扩展postcss配置,配置内容为:

module.exports = {
    plugins: [
        //自动添加浏览器前缀
        require("autoprefixer")({
            overrideBrowserslist: [
                "defaults",
                "Android 4.1",
                "iOS 7.1",
                "Chrome>31",
                "ff>31",
                "ie>=8",
                "last 2 versions",
                ">0%"
            ]
        })
    ]
}

以上一个基础的webpack环境就搭建好了