webpack拆分webpack.config.js文件

webpack可以分成3个文件：

1. production：生产环境
2. development：开发环境
3. base：公共都有的

创建build文件：build里面会分为3个配置文件：

拆分文件需要用到：npm i webpack-merge -D包（合并webpack配置，合并对象）

1. webpack.base.js文件：

// 所有的文件都要基于的文件

let HtmlWebpackPlugin = require('html-webpack-plugin')
let path = require('path')
//必须引入的 用作将定义过的其他规则（babel,css之类的） 复制到 .vue这个插件插件
// 没有这个插架就不会被转码
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: path.join(__dirname,'../src/main.js'),//入口文件
    output: {//hash 线上的时候要有hash 
        // 客户端通过一个网址已经浏览了一个网页了，假设网页更新了他怎么知道你更新了，
        // 如果不设置hash值它加载的js文件 会有一个缓存，就是大家看到的的有一个304的缓存
        // 如果它缓存了的话更新了它不能继续收到 因为它加载的时候以 这个文件的名字 为主
        // 就是他根据域名进行缓存的  客户端之所也没有更新他的网页是因为他有缓存 要想它更新就加一个hash就行
        // hash值它生成的时候是根据 文件名字和内容生成的
        // 所以说 只要有更新 线上的文件名字就一定会发生改变 改变了之后 在客户端浏览网页的时候 就不会请求缓存 
        // filename: "[name][hash：8].js",//生成的路径
        filename: "[name].js",//生成的路径

        path: path.join(__dirname, '../dist')
    },

    module: {
        rules: [
            {
                // 个个文件处理的loader
                test: /\.js$/,//例如说 它是.js结尾的 就可以用js结尾的loader
                use: [
                    {
                        loader: 'babel-loader',
                        options: {//options是一个配置项
                            // "preset": ['@babel/preset-env'],//配置它的预设
                            // "plugin": ['@babel/plugin-transform-runtime']
                        }
                    }
                ]
            },
            {
                // 个个文件处理的loader
                test: /\.css$/,//例如说 它是.js结尾的 就可以用js结尾的loader
                use: [//style-loader
                    // loader加载顺序是由后向前
                    'vue-style-loader', 'style-loader', 'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|mp3|mp4)$/,
                use: [

                    {
                        loader: 'file-loader',
                        options: {
                            // limit: 10240,
                            // name: "[name].[ext]",
                            esModule: false
                        }
                    }
                ],

            },
            {
                test: /\.vue$/,
                use: [

                    {
                        loader: 'vue-loader',
                        options: {
                            compiler: require('vue-template-compiler'),
                            transformAssetUrls: {
                                video: ['src', 'poster'],
                                source: 'src',
                                img: 'src',
                                image: ['xlink:href', 'href'],
                                use: ['xlink:href', 'href']
                            }
                        }
                    }
                ],
                include: path.join(__dirname, '../src'),
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': path.join(__dirname, '../src')
        }
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname,'../index.html')
        })
    ]
}

2. webpack.dev.js文件

// 开发环境

let { merge } = require('webpack-merge')
// 基于base 再去开发一些自己的配置项
let base = require('./webpack.base.js')

// merge可以是个函数 里面有2个参数 
// 第一个是base配置项 第二个是自己的配置项
// 得到的结果是配置好之后的配置项

let development = merge(base, {
    mode: 'development',//production
    devServer: {
        port: 9999,
        quiet:true,//安静模式
        progress: true,//进度条
        // compress: true,//Gzip压缩
        // contentBase: './dist'
        proxy: {//设置跨域
            // '/api': 'http://127.0.0.1:3000',
            '/api': {
              target: 'http://127.0.0.1:3000',//后台
              pathRewrite:{//路径的重写
                '^/api': ''
              }
            },
        
          },
          before(app) {//模拟接口 数据
            //app就是解构出来的express对象
            app.get('/list', function (req, res) {//模拟接口
              res.send({code: 1, msg: 'hello'});//返回数据
            });
          }
    },
    devtool:"source-map",
})
// console.log(development)

module.exports = development

3. webpack.prod.js文件

// 生产环境
let { merge } = require('webpack-merge')
// 基于base 再去开发一些自己的配置项
let base = require('./webpack.base.js')

// merge可以是个函数 里面有2个参数 
// 第一个是base配置项 第二个是自己的配置项
// 得到的结果是配置好之后的配置项

let production = merge(base, {
    mode: 'production',//development

})
// console.log(production)

module.exports = production

到这里已经解构出来了，打包之前需要去package.json文件修改：

在去打包：

npm run build
npm i dev

成功启动