webpack建立开发环境

webpack

webpack的强大在开发中能够得到更直白的体现，学习使用Webpack搭建开发环境，能够让开发更简单一些

使用source map

webpack能够打包我们的代码，虽然使用起来很方便，但在排除错误时，只会指向我们打包生成的bundle.js，很难定位到相应的准确位置。使用source map,能够跟踪错误的警告信息。
source map有许多配置信息，可以仔细查阅
webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new CleanWebpackPlugin(['dist'])
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-cheap-module-source-map'
}

Read More
webpack 开发环境