webpack学习笔记（三）

webpackConfig的分离

webpack配置的分离

# webpack-merge用来把分离的配置文件组合起来
npm install webpack-merge@4.1.5 --save-dev

把原来的webpack.config.js分离

• base.config.js 基本的
• dev.config.js 开发环境的
• prod.config.js 生产环境的

// base.config.js
// 基础的、公有的配置
const path = require('path')
const webpack = require('webpack')
const HtmlWeboackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js', // 入口
    output: { // 出口
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                },]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[hash:8].[ext]'
                    }
                  }
                ]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_componts)/,
                use: [
                  {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                  }
                ]
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.css', '.vue'],
        alias: {
           'vue$': 'vue/dist/vue.esm.js' 
        }
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归xxx所有'),
        new HtmlWeboackPlugin({
            template: 'index.html'
        }),
    ],
}

// dev.config.js
// 开发环境的配置
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
    devServer: {
        contentBase: './dist',
        inline: true
    }
})

// prod.config.js
// 生产环境的配置
const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
    plugins: [
        new UglifyJsWebpackPlugin()
    ],
})

然后再修改下package.json，指定执行命令时，读取的配置文件

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