Webpack配置文件抽离

前两篇文章说了webpack基础的模块使用和配置。本篇是webpack.config.js文件抽离。通俗来讲就是正式环境和开发环境使用不同的配置文件。主要分为3步

• 安装webpack-merge
• 创建多个配置文件，并且添加相应的代码
• 在package.json修改运行脚本

1、执行命令，安装webpack-merge到本地目录

 npm install webpack-merge --save--dev

2、在项目根目录下新建build目录，并创建

• 公用js文件base.config.js
• 生产js文件prod.config.js
• 开发js文件dev.config.js

在生产和开发文件中引入base.config.js和webpack-merge，使用案例

const baseConfig = require('./base.config.js');

const webpackMerge = require('webpack-merge');

module.exports = webpackMerge.merge(baseConfig,{
    devServer: {
        contentBase: path.join(__dirname, "../dist"), //本地服务根文件
        inline: true ,//实时刷新
        port: 8080
    }
})

3、在package.json中修改编译的文件

"scripts": {
    "dev": "webpack-dev-server --open --config build/dev.config.js",
    "build": "webpack --config build/prod.config.js",
},

项目结构：

image.png

完整的base.config.js代码

const HtmlWebpackPlugin = require('html-webpack-plugin');

 const  path = require('path');

//一旦依赖node 就npm init day07-webpack配置文件合并

//定义base运行目录
 const baseBuildPath = "../dist";



module.exports = {
    entry : './src/main.js', //入口文件
    output : {
        path : path.resolve(__dirname,baseBuildPath),  //输出目录
        filename : 'bundle.js'  //输出文件名
    },
    mode: 'production',
    resolve : {
        //省略后缀名
        extensions : ['.js','.css','.vue'],
        alias : {
            '@':path.join(__dirname,'./src'),//这样 @就表示根目录src这个路径
            vue: 'vue/dist/vue.js',
        }
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                // options:vueloaderOptions(isDev),
                // exclude:/node_modules/
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "index.html"
        })
    ]
}

完整的开发配置文件dev.config.js代码

/** 开发环境文件配置 **/
const baseConfig = require('./base.config.js');

const webpackMerge = require('webpack-merge');

const  path = require('path')

//一旦依赖node 就npm init day07-webpack配置文件合并

module.exports = webpackMerge.merge(baseConfig,{

    devServer: {
        contentBase: path.join(__dirname, "../dist"), //本地服务根文件
        inline: true ,//实时刷新
        port: 8080
    }

})

完整的生成环境prod.config.js代码

/** 生成环境文件配置 **/
//代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const webpack = require('webpack');

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config.js');

//一旦依赖node 就npm init day07-webpack配置文件合并

module.exports = webpackMerge.merge(baseConfig, {
    plugins: [
        new webpack.BannerPlugin("版本归test所有."),

        new UglifyJsPlugin()
    ]
});

完整的package.json代码

{
  "name": "day06",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config build/dev.config.js",
    "build": "webpack --config build/prod.config.js",
    "beizhu": "--mode=development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.2",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue": "^2.6.12",
    "vue-loader": "^14.1.1",
    "vue-template-compiler": "^2.6.12",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}