webpack项目调试以及独立打包配置文件的方法

下面是关于“webpack项目调试以及独立打包配置文件的方法”的完整攻略：

项目调试

方式一：使用devtool

webpack的devtool选项用来配置source map的生成方式。设置这个选项可以很方便地进行调试。

常用的有以下几种：

1. source-map：一种映射方式，会生成一个 .map 文件，会减慢打包速度。
2. cheap-module-source-map：跟上面的差不多，但不会映射列信息，会将 loader 的 source map 加入。
3. eval-source-map：使用 eval 执行代码，能够增加性能，并且保留了 source map。
4. cheap-module-eval-source-map：这是 dev-server 中默认开启的，速度最快，生成后只保留行信息。

我们可以在 webpack 的配置文件中进行如下配置：

module.exports = {
  // ...
  devtool: 'eval-source-map' // 或者其他选项
}

方式二：使用devServer

webpack-dev-server 提供一个简单的 web 服务器，并且能够实时重新加载（live reloading）。

启用我们可以在 webpack 的配置文件中进行如下配置：

module.exports = {
  // ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 静态文件位置
    compress: true, // 打开gzip压缩
    port: 9000 // 端口号    
  }
}

独立打包配置文件

有时候，我们希望将 webpack 的配置文件独立出来进行管理，而不是把它们写在 package.json 中的 scripts 或 webpack.config.js 中。

方式一：通过命令行传递参数

我们可以在运行 webpack 命令的同时通过 --config 选项来指定 webpack 的配置文件，如下：

webpack --config ./conf/webpack.prod.conf.js

方式二：使用 webpack-merge

使用 webpack-merge，我们可以将 webpack 的配置拆分为多个小配置，最终将它们合并成一个大的配置。

首先，我们需要安装 webpack-merge：

npm install webpack-merge --save-dev

然后，我们可以创建多个配置文件，如 webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js，他们分别对应了基础配置、生产环境配置和开发环境配置。我们可以在这些文件中定义我们需要的配置，并暴露出来：

// webpack.base.conf.js

const path = require('path')

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

// webpack.prod.conf.js

const webpack = require('webpack')
const baseConfig = require('./webpack.base.conf.js')

module.exports = Object.assign({}, baseConfig, {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
})

// webpack.dev.conf.js

const baseConfig = require('./webpack.base.conf.js')

module.exports = Object.assign({}, baseConfig, {
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 静态文件位置
    compress: true, // 打开gzip压缩
    port: 9000 // 端口号    
  }
})

最后，我们可以使用 webpack-merge 模块来将它们合并成一个大的配置文件：

// webpack.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./webpack.base.conf')
const prodConfig = require('./webpack.prod.conf')
const devConfig = require('./webpack.dev.conf')

let config = {}
switch (process.env.NODE_ENV) {
  case 'production':
    config = webpackMerge(baseConfig, prodConfig)
    break
  case 'development':
    config = webpackMerge(baseConfig, devConfig)
    break
  default:
}
module.exports = config

到这里，我们就成功地实现了 webpack 的大项目拆分以及独立配置文件的管理。