✏️MK知识库

Appearance

这是webpack4演示，webpack5有些插件不在推荐，

1. webpack.base.config.js文件的配置说明 ​

javascript
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
// const CleanWebpackPlugin = require('clean-webpack-plugin');

function resolve (dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    // webpack打包入口
    entry: {
        main: './src/main',
        vendors: './src/vendors' // 去除不必要的插件，在index.html中需要引入这个文件
        // 也就是在index.html中加入  <script src="/build/vendor.js"></script>
    },
    // webpack打包转换后的文件输出到磁盘位置
    output: {
        // __dirname始终指向被执行js文件的绝对路径，这里的path就是指向dist文件夹（也就是输出的位置）
        path: path.join(__dirname, '../dist/')
    },
    // externals: {
    //     'vue': 'Vue',
    //     'iview': 'iview',
    //     'vue-router': 'VueRouter',
    //     'vuex': 'Vuex',
    //     'js-cookie': 'Cookies',
    //     // 'tinymce': 'tinymce',
    //     'axios': 'axios',
    //     // 'echarts': 'echarts',
    //     // 'html2canvas': 'html2canvas',
    //     // 'sortablejs': 'Sortable'
    // },

    /**
     * loader是模块解析，模块转换器
     * webpack是模块打包工具，而模块不仅仅是js，还可以是css，图片或者其他格式
     * 但是webpack默认只处理js和json，其他模块就需要用loader了
     */ 
    // 模块配置，在webpack里一切皆模块，用来配置需要的匹配规则及使用哪种loader转换器
    module: {
        rules: [
            {
                test: /\.vue$/, // 正则表达式匹配规则，适配vue
                loader: 'vue-loader', // 使用vue-loader，加载和转义vue组件
                options: {
                    loaders: {

                        less: ExtractTextPlugin.extract({
                            use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
                            fallback: 'vue-style-loader'
                        }),

                        css: ExtractTextPlugin.extract({
                            use: ['css-loader', 'autoprefixer-loader'],
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test: /iview\/.*?js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader?minimize', 'autoprefixer-loader'], // 指定需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
                    fallback: 'style-loader' // 编译后用什么loader来提取css文件
                })
            },
            {
                test: /\.less/,
                use: ExtractTextPlugin.extract({
                    use: ['autoprefixer-loader', 'less-loader'], // autoprefixer-loader具有自动添加css前缀的功能
                    fallback: 'style-loader'
                })
            },

            {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader'
            },
            {
                test: /\.(html|tpl)$/,
                loader: 'html-loader'
            }
        ]
    },
    resolve: {
        // resolve.extensions在导入语句没带文件后缀时，webpack会自动带上后缀，去尝试查找文件是否存在，但是在查找的时候，会耗费一定的打包时间
        extensions: ['.js', '.vue'],
        alias: { // resolve.alias配置通过别名来将原导入路径映射成一个新的导入路径（优化开发体验）
            'vue': 'vue/dist/vue.esm.js',
            '@': resolve('../src'),
            '@views': resolve('../src/views'),
            'assets': resolve('../src/assets/'),
            'store': resolve('../src/store/'),
            'jquery': resolve('../src/common/js/jquery.js')
        }
    },
    // 增加一个plugins
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        // new CleanWebpackPlugin('dist/*.*', {
        //     root: __dirname,
        //     verbose: true,
        //     dry: false
        // })
   ],
};

2. webpack.dev.config.js文件的配置说明（开发环境） ​

javascript
const webpack = require('webpack');
// HtmlWebpackPlugin作用：
// 1、为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
// 2、可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs'); //fs 是 file-system 的简写，就是文件系统的意思;在 Node 中如果想要进行文件操作，就必须引入 fs 这个核心模块

fs.open('./src/config/env.js', 'w', function (err, fd) {
    const buf = 'export default "development";';
    // node --version < v10.1.0
    // fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {});
    // node --version > v10.1.0
    fs.write(fd, buf, 0, 'utf-8', function (err, written, buffer) {
        if (err) {
            throw new Error(err);
        }
    });
});

module.exports = merge(webpackBaseConfig, {
    // devtool: '#source-map',
    devtool: '#cheap-module-eval-source-map',
    output: {
        publicPath: '/dist/',
        filename: '[name].js',
        chunkFilename: '[name].chunk.js'
    },
    plugins: [ // 每个插件的具体API配置
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js'
        }),
        new HtmlWebpackPlugin({ // 打包输出HTML
            filename: '../index.html',
            template: './src/template/index.ejs',
            title: '同花顺管理平台',
            inject: false
        })
    ],
    devServer: {
        port: 8082,
        host: '0.0.0.0',
        watchOptions: { // 配置webpack服务
            ignored: '/node_modules/', // 不监测
            poll: 1200 // 监测修改的时间(ms)
        },
        // lazy: true,//只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。我们称之为“惰性模式”。
        proxy: { // 设置代理
            '/yyzt-web': {
                // target: 'http://121.33.247.51:8602''http://cbas.ths8.com',
                // target: 'http://127.0.0.1:9080',
                // target: 'http://cbas.ths8.com',
                changeOrigin: true,
                target: 'http://cbas.ths8.com:81',
                pathRewrite: {
                    '^/yyzt-web': '/yyzt3-web'
                }
            },
            '/yyzt3-web': {
                // target: 'http://121.33.247.51:8602''http://cbas.ths8.com',
                // target: 'http://127.0.0.1:9080',
                target: 'http://cbas.ths8.com:81',
                // target: 'http://113.9.77.117:9711',
                // target: 'http://172.20.51.196:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/yyzt3-web': '/yyzt3-web'
                }
            },
            // 自己添加的图片代理
            '/group1': { // 需要请求的资源

                target: "http://cbas.ths8.com:81", // 目标域名及地址

                changeOrigin: true, // 是否跨域

                pathRewrite: { // 地址重定向
                    '^/group1': '/group1' // 也就是将前面的group1替换成后面的（这里是一样的，所以可以不写）
                }

            },
            '/cbas': {
                // target: 'http://121.33.247.51:8602''http://cbas.ths8.com',
                // target: 'http://127.0.0.1:9080',
                target: 'http://106.37.195.27:8083',
                changeOrigin: true,
                pathRewrite: {
                    '^/cbas': '/cbas'
                }
            },
            '/yyzt-html': {
                // target: 'http://192.168.51.234:8080',
                target: 'http://point.stocke.com.cn',
                changeOrigin: true,
                pathRewrite: {
                    '^/yyzt-html': '/yyzt-html'
                }
            },
            '/point': {
                // target: 'http://121.33.247.51:8602''http://cbas.ths8.com' 'http://127.0.0.1:9102',
                target: 'http://127.0.0.1:9102',
                changeOrigin: true,
                pathRewrite: {
                    '^/point': '/point'
                }
            },
            '/hexinifs': {
                // target: 'http://192.168.51.234:8080',
                target: 'http://point.stocke.com.cn',
                changeOrigin: true,
                pathRewrite: {
                    '^/hexinifs': '/hexinifs'
                }
            },
            '/yyzt-uamp-web': {
                target: 'http://point.stocke.com.cn',
                // target: 'http://cbas.ths8.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/yyzt-uamp-web': '/yyzt-uamp-web'
                }
            }
        }
    }
});

3. webpack.prod.config.js文件的配置说明（生产环境） ​

php
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const fs = require('fs');
var path = require('path')
const FastUglifyJsPlugin = require('fast-uglifyjs-plugin');

fs.open('./src/config/env.js', 'w', function (err, fd) {
    const buf = 'export default "production";';
    // fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
    fs.write(fd, buf, 0, 'utf-8', function (err, written, buffer) { });
});

module.exports = merge(webpackBaseConfig, {
    output: {
        publicPath: './dist/',
        filename: '[name].[hash].js',
        chunkFilename: '[name].[hash].chunk.js'
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].[hash].css',
            allChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.[hash].js'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        // new webpack.optimize.UglifyJsPlugin({
        //     compress: {
        //         warnings: false
        //     }
        // }),
        new FastUglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false,
                drop_console: true,
            },
            // debug设为true可输出详细缓存使用信息:
            debug: true,
            // 默认开启缓存，提高uglify效率，关闭请使用 false:
            cache: true,
            // 默认缓存路径为项目根目录，手动配置请使用:
            cacheFolder: path.resolve(__dirname, '../.build_cache'),
            // 工作进程数，默认os.cpus().length
            workerNum: 2
        }),
        new HtmlWebpackPlugin({
            filename: '../index_prod.html',
            template: './src/template/index.ejs',
            title: '同花顺管理平台',
            inject: false
        }),
        new CleanWebpackPlugin(
            ['./dist/main.*.css', './dist/*.js'],　 //匹配删除的文件
            {
                root: __dirname,       　　　　　　　　　　//根目录
                verbose: true,        　　　　　　　　　　//开启在控制台输出信息
                dry: true        　　　　　　　　　　//启用删除文件
            })
    ]
});

4.webpack-merge 合并配置文件 ​

webpack-merge 是一个工具，它允许你将多个 webpack 配置文件合并成一个，这对于维护不同环境（如开发环境、生产环境）的配置特别有用。通过使用 webpack-merge，你可以保持基础配置不变，同时为不同环境添加或覆盖特定的配置选项。 以下是如何使用 webpack-merge 来合并 webpack 配置文件的示例： 首先，你需要安装 webpack-merge：

bash
bash复制代码
npm install --save-dev webpack-merge
yarn add webpack-merge --dev

安装完成后，webpack-merge 将被添加到你的 node_modules 目录中，并且其版本信息将被添加到你的 package.json 文件的 devDependencies 部分。

然后，你可以创建多个配置文件，例如一个基础配置文件 webpack.base.config.js，一个用于开发环境的配置文件 webpack.dev.config.js，以及一个用于生产环境的配置文件 webpack.prod.config.js。 webpack.base.config.js

javascript
javascript复制代码



const path = require('path');  
  
module.exports = {  
    entry: {  
        app: './src/index.js'  
    },  
    output: {  
        filename: '[name].bundle.js',  
        path: path.resolve(__dirname, 'dist')  
    },  
    module: {  
        rules: [  
            // 通用加载器配置  
        ]  
    },  
    // 其他通用配置...  
};

webpack.dev.config.js

javascript
javascript复制代码



const merge = require('webpack-merge');  
const baseConfig = require('./webpack.base.config.js');  
  
module.exports = merge(baseConfig, {  
    mode: 'development',  
    devtool: 'inline-source-map',  
    devServer: {  
        contentBase: './dist',  
        hot: true  
    },  
    // 开发环境特有的配置...  
});

webpack.prod.config.js

javascript
javascript复制代码



const merge = require('webpack-merge');  
const baseConfig = require('./webpack.base.config.js');  
  
module.exports = merge(baseConfig, {  
    mode: 'production',  
    optimization: {  
        minimize: true  
    },  
    plugins: [  
        // 生产环境特有的插件...  
    ],  
    // 生产环境特有的配置...  
});

在上面的示例中，webpack.dev.config.js 和 webpack.prod.config.js 都使用了 webpack-merge 来合并 webpack.base.config.js 中的基础配置。然后，它们各自添加了针对开发环境和生产环境的特定配置。 通过这种方式，你可以确保基础配置的一致性，并只关注不同环境之间的差异。当你运行 webpack 时，只需要根据当前环境选择正确的配置文件即可。 例如，在开发环境中，你可以这样运行 webpack：

bash
bash复制代码
npx webpack --config webpack.dev.config.js

在生产环境中，你可以这样运行：

bash
bash复制代码
npx webpack --config webpack.prod.config.js

或者，你可以在 package.json 的 scripts 部分设置相应的命令，以便更方便地运行 webpack。

常用的loader和插件种类繁多，以下是一些常见的示例：

Loader示例： ​

  1. babel-loader：用于将ES6+的语法转化为向后兼容的JavaScript版本，使得新特性能够在旧版浏览器中使用。
  2. style-loader 和 css-loader：用于处理CSS文件。style-loader将CSS添加到DOM中，而css-loader解析CSS文件中的import和url()。
  3. file-loader 和 url-loader：用于处理在JavaScript中引入的文件，例如图片或字体文件。它们能够将文件移动到输出目录，并在代码中引用它们。
  4. vue-loader：专门用于加载Vue.js组件，处理单文件组件的.vue文件。
  5. ts-loader：用于加载TypeScript文件，并将其转换为JavaScript。

插件示例： ​

  1. HtmlWebpackPlugin：简化HTML文件的创建，自动引入打包后的JS文件。
  2. MiniCssExtractPlugin：将CSS提取到单独的文件中，而不是嵌入到JS中。
  3. CleanWebpackPlugin：在每次构建之前清理输出目录，确保没有旧的构建文件。
  4. DefinePlugin：允许在编译时创建配置的全局常量，这对于配置模式或环境变量非常有用。
  5. CopyWebpackPlugin：将单个文件或整个目录复制到构建目录中。
  6. WebpackBar：在构建过程中显示进度条和相关信息，提供视觉反馈。

这些只是众多可用loader和插件中的一部分。实际上，webpack的生态系统非常庞大，你可以根据项目需求选择适合的loader和插件。同时，随着技术的不断发展，新的loader和插件也不断涌现，建议经常查看webpack的官方文档和社区资源，以获取最新的信息和最佳实践。

Released under the MIT License.

Copyright © 2025-present yanmk