webpack学习（二）

一、SourceMap的配置：

const path = require('path');
module.exports = {
  mode: 'production', 
  devtool: 'inline-source-map',  //可以将打包后运行的错误映射到打包之前的文件位置中
  // development devtool: 'cheap-module-eval-source-map'
  // production  devtool: 'cheap-module-source-map'
  entry: '.src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

二、使用WebpackDevServer提升开发效率：

使用命令npm i -D webpack-dev-server安装

// webpack.config.js文件：
const path = require('path');
module.exports = {
 devServer: {
    contentBase: './dist',  // 自动刷新页面
    open: true   // 自动打开一个浏览器并且自动打开localhose:8080端口
 }
}
// package.json文件：
"scripts" {
    "start": "webpack-dev-server"
}

三、Hot Module Replacement热模块更新：

// webpack.config.js文件：
const path = require('path');
const weepack = require('webpack');
module.exports = {
 plugins: [new HtmlWebpackPlugin(template: 'src/index.html' ),
           new CleanWebpackPlugin('dist'),
           new webpack.HotModuleReplacementPlugin()],
 devServer: {
    contentBase: './dist', 
    open: true,
    hot: true, 
    hotOnly: true
 }
}
// package.json文件：
"scripts" {
    "start": "webpack-dev-server"
}