webpack4简易配置

作者: 清苑折纸 | 来源:发表于2021-09-06 09:51 被阅读0次

webpack4简易配置
webpack4 splitChunkPlugin配置介绍
vue+ts
Webpack06-html打包插件html-webpack-p
16 代码分割 SplitChunksPlugin配置参数
webpack4+ 基础配置及使用
Webpack 4 学习03（配置入口和出口的进阶使用）
Replace Autoprefixer browsers op
Typescript + React + Webpack4(2)
webpack4配置vue开发环境

安装webpack@4 webpack-cli@3 webpack-dev-server@3

plugin插件：

html-webpack-plugin
mini-css-extract-plugin //抽离css
optimize-css-assets-webpack-plugin //压缩css
uglifyjs-webpack-plugin //压缩js
cleanWebpackPlugin //可在打包前删除dist文件夹
copyWebpackPlugin //复制文件夹内文件至指定打包文件
bannerPlugin 内置模块 //在文件开头加上备注信息

loader：

=======处理样式文件=========

css-loader //解析@import语法
style-loader //把css插入到head标签中
less-loader //将less转为css
postcss-loader autoprefixer //自动添加css前缀,需要配置postcss.config,js文件

========处理js文件==========

babel-loader @babel/core @babel/preset-env //js处理，es6转es5
@babel/polyfill //重写不能实现的高级语法，在js内require('@babel/polyfill')
@babel/plugin-transform-runtime //抽离公共js部分
eslint eslint-loader //js语法检测

=========处理图片========

图片的引入方式：
1.js中创建
2.css中background引入
3.img标签引入

file-loader //默认会在内部生成一张图片，并把图片名字返回,需要使用import将图片引入import bgc form './bgc.png'
html-withimg-loader //解析html内的图片
url-loader //设置文件小于多少k时使用base64解析

========映射文件配置========

devtool//增加映射文件
'source-map' //源码映射，会单独生成一个.map文件,出错了会标识当前报错的行和列
'eval-source-map' //不会生成单独的文件但可以显示错误的行和列
'cheap-module-source-map' //不会产生列，但是是一个单独的文件
'cheap-module-eval-source-map' //不会生成文件，集成在打包文件中，不会产生列（不提示具体位置）

==========跨域============

跨域
devServer.proxy内配置，但仅开发环境可用

==========区分不同环境===========

区分不同的环境，可以建3个webpack配置文件，一个基础的，一个开发一个生产，使用webpack-merge合并

仅一个配置文件时

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //抽离css
const OptimizeCss = require("optimize-css-assets-webpack-plugin"); //压缩css
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin"); //压缩js
const {CleanWebpackPlugin} = require('clean-webpack-plugin') //删除打包后的文件夹dist
const CopyWebpackPlugin = require('copy-webpack-plugin') //复制文件至指定打包后文件夹
const webpack = require('webpack')

module.exports = {
    mode: "development", //模式默认两种development、production
    //===========单入口==========
    entry: "./src/index.js", 
    output: {
        path: path.resolve(__dirname, "dist"), //路径必须是一个绝对路径，resolve将路径转为绝对路径
        filename: "[name].bundle[chunkhash:8].js", //打包后的文件,hash戳显示hash长度为8,name为路由懒加载时的webpackchunkname
        //路由配置格式为 component: () => import(/* webpackChunkName: "notFound" */'@/views/404.vue')
        // publicPath: 'http://localhost:8080' //所有文件打包的公共路径
    },
    //=============多入口===========
    // entry: {
    //     home: './src/index.js',
    //     other: './src/other.js'
    // },
    // output: {
    //     filename: '[name].[hash:8].js',
    //     path: path.resolve(__dirname, 'dist')
    // },
    // plugins: [ //多页面
    //     new HtmlWebpackPlugin({
    //         template: './index.html',
    //         filename: 'home.html',
    //         chunks: ['home'] //需要引入的文件 
    //     }),
    //     new HtmlWebpackPlugin({
    //         template: './index.html',
    //         filename: 'other.html',
    //         chunks: ['other']
    //     }),
    // ],
    devServer: {
        port: 8080,
        hot: true,
        open: true,
        contentBase: "./dist", //默认打开文件夹路径
    },
    module: {
        //模块
        rules: [
            //规则
            {
                //css-loader解析@import语法
                //style-loader是把css插入到head标签中
                //less-loader将less转为css
                //多个loader使用数组，单个laoder使用字符串
                //loader顺序是从右向左，从下至上执行
                test: /\.css$/,
                use: {
                    loader: ["style-loader", "css-loader"],
                },
                //loader也可以写成对象的形式，此时可以向其配置属性
                // use: [
                //==================将css文件放在style标签内===========
                //     {
                //         loader: 'style-loader',
                //         options: {
                //             insertAt: 'top'
                //         }
                //     },
                //     'css-loader'
                // ]
                //==================将css文件抽离出来===========
                // use: [
                //     MiniCssExtractPlugin.loader, //将css抽离出来放到link标签内
                //     'css-loader'
                // ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "less-loader",
                ],
            },
            {
                test: /\.js$/, //normal 普通顺序的loader
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env", //es6转es5
                            "@babel/plugin-transform-runtime", //抽离公共部分
                        ],
                    },
                },
            },
            {
                test: /\.js$/,
                use: {
                    loader: "eslint-loader", //校验js eslint规范
                    options: {
                        enforce: "pre", //previous强制先执行 post强制后执行，默认为normal
                    },
                },
            },
            {
                //会在内部生成一张图片，并把图片名字返回,需要使用import将图片引入 
                //import bgc form './bgc.png'
                test: /\.(png|jpg|gif)$/,
                use: 'file-loader' 
            },
            {
                //限制图片大小小于200K时使用base64转化，否则使用file-loader产生真实图片
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'uel-loader',
                    options: {
                        limit: 200*1024,
                        output: '/img/', //将文件打包进img文件夹下
                        publicPath: 'http://loaclhost:8080' //图片的公共路径
                    }
                }
            },
            {
                test: /\.html$/,
                use: 'html-withimg-loader' //解析html内的图片
            }
        ],
    },
    plugins: [
        //数组放所有webpack插件
        new HtmlWebpackPlugin({
            title: "快速开始",
            template: "index.html", //模板文件
            filename: "index.html", //打包后的文件名
            minify: {
                //压缩html文件
                removeAttributeQuotes: true, //移除双引号
                collapseWhitespace: true, //单行
            },
            hash: true, //引用js时使用hash戳
        }),
        new MiniCssExtractPlugin({
            filename: "main.css",
        }),
        new CleanWebpackPlugin(), //打包前删除dist目录
        new CopyWebpackPlugin({
            from:'doc', //将doc文件夹下的东西拷贝进dist
            to: './'
        }),
        new webpack.BannerPlugin('Author by xxx') //在文件开头加上备注信息
    ],
    optimization: {
        //优化项,production模式才会启用
        minimizer: [
            new OptimizeCss(),
            new UglifyjsWebpackPlugin({
                cache: true, //是否缓存
                parallel: true, //是否并发打包
                sourceMap: true, //是否映射
            }),
        ],
    },
    //增加映射文件
    // devtool: 'source-map' //源码映射，会单独生成一个.map文件,出错了会标识当前报错的行和列
    // devtool: 'eval-source-map' //不会生成单独的文件但可以显示错误的行和列
    // devtool: 'cheap-module-source-map' //不会产生列，但是是一个单独的文件
    devtool: 'cheap-module-eval-source-map', //不会生成文件，集成在打包文件中，不会产生列（不提示具体位置）
    watch: true, //文件发生变化就自动打包
    watchOptions: {
        //监控的选项
        poll: 1000, //每秒问我1000次是否要打包
        aggregateTimeout: true, //防抖
        ignored: '/node_modules' //不需要监控的文件
    },
    devServer: {
        proxy: {
            // '/api': 'http://localhost:8080' //配置了一个代理服务器，以/api开头的都去找该端口
            '/api': {
                target: 'http://localhost:8080',
                pathRewrite: {'^/api': ''} //将/api重写为空
            }
        }
    },
    externals: { // 在html文件通过cdn引入以下文件，打包时排除以下通过import引入的包
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT'
      },
    resolve: {
        alias: { //设置别名
            '@': resolve('src/')
        }
    }
};

区分模式时

webpack.base.config.js

将以上文件的mode去掉，devServer去掉（仅开发模式使用），optimization去掉（仅生产模式启用）

webpack.prod.config.js

const {merge} = require('webpack-merge')
const base = require('./webpack.base.config')
const OptimizeCss = require("optimize-css-assets-webpack-plugin"); //压缩css

module.exports = merge(base,{
    mode: 'production',
    optimization: {
        minimizer: [
            new OptimizeCss()
        ]
    }
})

webpack.dev.config.js

const {merge} = require('webpack-merge')
const base = require('./webpack.base.config')

module.exports = merge(base,{
    mode: 'development',
    devServer: {
        proxy: {
            // '/api': 'http://localhost:8080' //配置了一个代理服务器，以/api开头的都去找该端口
            '/api': {
                target: 'http://localhost:8080',
                pathRewrite: {'^/api': ''} //将/api重写为空
            }
        }
    }
})

webpack4简易配置
安装webpack@4 webpack-cli@3 webpack-dev-server@3 plugin插件： ...
webpack4 splitChunkPlugin配置介绍
webpack4 splitChunkPlugin配置介绍前言 webpack4删除了CommonsChunkP...
vue+ts
找到对应配置升级webpack4
Webpack06-html打包插件html-webpack-p
1、安装在webpack4之前，默认集成该插件，无需安装在webpack4之后，需要独立安装 2、配置
16 代码分割 SplitChunksPlugin配置参数
SplitChunksPlugin配置参数 webpack4之后，使用SplitChunksPlugin插件替代了...
webpack4+ 基础配置及使用
现在webpack4出来了，需要重新记录一下webpack4的基本配置，为了以后节省新项目配置时间，很多东西一下子...
Webpack 4 学习03（配置入口和出口的进阶使用）
前提：知道webpack4的基础配置以及如何使用配置文件进行打包第一讲 Webpack 4 学习01（基础配置） ...
Replace Autoprefixer browsers op
webpack4配置postcss报错 webpack.config.js 修改需要用overrideBrows...
Typescript + React + Webpack4(2)
在上一篇我们讲了Typescript + React + Webpack4的基本配置，通过在上一篇的配置，我们能够...
webpack4配置vue开发环境
本文总结Webpack4常见的配置。1、基础配置（让项目跑起来）2、webpack处理css3、webpack处理...