Construction WebPACK development environment from 0 (iii) using the development environment and the webpack-dev-server

sourceMap

The actual application development process, most of the time in development mode, which requires frequent modify the code, debugging and packaging.

However, packetized compressed codes into a plurality of modules bundle file, if the warning or abnormal and difficult to locate the specific location module, it provides a source map webpack configuration devtool,
the configuration and having a plurality of selectable items arranged, particularly comprising the following:

devtool	Construction of speed	Rebuild speed	Production Environment	Quality (quality)
(none)	+++	+++	yes	After the package codes
eval	+++	+++	no	The generated code
cheap-eval-source-map	+	++	no	The converted code (line only)
cheap-module-eval-source-map	The	++	no	The original source code (line only)
eval-source-map	--	+	no	The original source code
cheap-source-map	+	The	yes	The converted code (line only)
cheap-module-source-map	The	-	yes	The original source code (line only)
inline-cheap-source-map	+	The	no	The converted code (line only)
inline-cheap-module-source-map	The	-	no	The original source code (line only)
source-map	--	--	yes	The original source code
inline-source-map	--	--	no	The original source code
hidden-source-map	--	--	yes	The original source code
nosources-source-map	--	--	yes	Passive Content Code

+++ very fast, fast ++, + faster, o medium, - slow - slow

Where eval, eval-source-map, cheap-eval-source-map, heap-module-eval-source-map, more suitable development environment.

More detailed information can be viewed devtool documents

Add devtool configured here in the original configuration files devtool: 'cheap-eval-source-map',

webpack-dev-server

webpack-dev-serverIt can provide a simple web server, and has a live reloading (real time to reload) function. The tool is not webpack built, so the need for additional installation.

yarn add webpack-dev-server --dev

After the installation is complete in the package.jsonfile script, add the following startup mode, --openthe meaning is to start to open the browser

"start": "webpack-dev-server --open"

You may then be executed from the command line npm run startor yarn start.
You can see webpack-dev-server in 8080 (by default) port launched a service. And there is a websocket link. This time the module content changes, devServer server notifies the browser refresh by websocket.

At this module will be packed into memory, not output to the hard drive.

You can add webpack profile devServeroption to configure devServer

devServer: {
  // contentBase: './dist', //设置该值，devServer会到目标目录读取文件而不会打包到内存中
  port: 8080 // 指定端口号，默认8080
  compress: true // 一切服务都启用 gzip 压缩
  proxy: {
    '/api': 'http://localhost:3000'
  }  //接口代理，比如以上配置会将/api的接口都代理到 http://localhost:3000/api
}

You can view detailed configuration devServer

Hot replacement

Alternatively hot module (hot module replacement or the HMR) webpack is one of the most useful features provided. It allows to update all types of modules at runtime, without having to completely refresh. Change the mode applies only to model developmentmode: development

To use the thermal module replacement, it needs webpack built HotModuleReplacementPlugin,

const webpack = require('webpack')
devServer:{}
plugins: [
  derServer: {
    hot: true,
  },
  new webpack.HotModuleReplacementPlugin(),
]

Then create a src directory under the print.jsfile, a print function Export

src/print.js

export default function pring(){
  console.log('log A')
}

In index.js print.js introduced, and add some code at the bottom

import _ from 'lodash'
import print from './print' 

import './style.css'
import ImgFile from './asset/tim.jpg'

function createComponent(tag) {
  let element = document.createElement(tag)

  element.innerHTML = _.join(['Hello', 'webpack'], ', ')
  element.classList.add('red')

  let img = new Image()
  img.src = ImgFile

  element.append(img)

  print() //log something

  return element
}

document.body.append(createComponent('div'))

if(module.hot){
  module.hot.accept('./print.js', function(){
    print()
    console.log('模块热更新啦！')
  })
}

After completion of the above devServer restart the server.
Check the browser console you can see information print print the log Ainformation and enable hot replacement

This time modify print.js, add one more print information

export default function pring(){
  console.log('log A')
  console.log('log B')
}

This completes the hot update the basic configuration.

But there is a problem that does not trigger hot update when you modify the contents of index.js.
This is because the code in the module.hot.acceptfunction to receive the first parameter is ./print.jsan absolute path to a file, if the heat when the replacement module code will only execute the print.

Usually this situation the solution of the entrance into another application logic module app.js file, and then introduced into the module index.js, the re-execution of the code of the module.

PS: hot replacement css file using the style-loader.

React and can be used for Vue

React Hot Loader

Vue Loader

Complete webpack.config.js file

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: {
    app: path.resolve(__dirname, './src/index.js')
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'cheap-eval-source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|bmp)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    }),
    new CleanWebpackPlugin()
  ]
}