webpack-配置文件的分离

webpack-配置文件的分离

1.新建一个文件夹命名为build

在该文件夹下创建三个js文件：

2.将原来webpack.config.js文件中的内容全部复制到三个文件中

再对已经复制的内容进行选择性删除。
首先，安装npm install webpack-merge --save-dev
再对文件中内容进行内容修改。
例如，三个文件内容结果如下：

注意：base中放的代码应该是公共（生产和开发）的东西。
base.config.js内容如下：

const path = require('path')
const  webpack  = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry:'./src/main.js',
    output:{
        // 动态获取绝对路径
        //可以将两个路径拼接dirname全局上下文
        //md dirname前面是两个下划线！！！！
        path: path.resolve(__dirname,"../dist"),
        filename:'bundle.js',
        // publicPath:'dist/'
    },
    module:{
        rules:[
            {
                //test 匹配css
                test:/\.css$/,
                //css-loader只负责css加载，不负责解析
                //style-loader 负责将样式添加到dom中
                //使用多个loader时，是从右向左的
                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: 'url-loader',
                    options: {
                        //当加载的图片，小于limit时，会将图片编译成base64字符串形式
                        //当大于limit时，需要file-loader配置 需要安装
                      limit: 17000,
                      name:'img/[name].[hash:8].[ext]'
                    }
                  }
                ]
              },
            {
              test: /\.js$/,
              //exclude:排除
              //include：包含
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                presets: ['es2015']
                }
              }
            },
            {
              test:/\.vue$/,
              use:['vue-loader']
            }
        ]
    },
    resolve:{
      //alias：起别名
      alias:{
        'vue$':'vue/dist/vue.esm.js' //指向具体的文件夹 先去node_modules找
      }
    },
    plugins:[
      new webpack.BannerPlugin('最终版权归我所有'),
      new HtmlWebpackPlugin({
        template:'index.html'
      })
    ]    
}

dev.config.js代码如下：

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

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

prod.config.js代码如下：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

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

注意dev和prod文件对base文件的导入

3.将文件打包到新建的build文件夹中

此时可以删除原来的webpack.config.js文件，但是如果直接打包的话，会报错，因为之前指定的打包文件还没有更改。
在package.json文件中做如下修改：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },

现在打包，确实可以将文件打包到build中，但是dist文件也会打包到build中，需要在base.config.js文件中修改。如下图画红线的部分。定位到上上一级的文件夹中的dist