webpack4+ 学习之开发辅助

source map

当webpack打包时，堆栈跟踪跟踪不到错误和警告在源码中的原始位置，只能简单的指向bundle.js。

为了更容易的追踪错误和警告，javascript提供了source map 功能，将编译后的代码映射回原始源代码。

在webpack.config.js中使用inline-source-map选项：

  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'
    },
+   devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

npm run build

选择开发工具

每次编译代码时，需要手动运行 npm run build ，比较麻烦，webpack中有几个不同的选项，可以使代码发生变化后自动编译代码：

1. webpack's Watch Mode

2. webpack-dev-server

3. webpack-dev-middleware

大部分场景，只需使用 webpack-dev-server

使用观察者模式

可以指示webpack "watch"依赖图中的所有文件以进行更改，如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。

在webpack的观察模式的npm script脚本：

packge.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "watch": "webpack --watch",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

更改代码之后，重新刷新游览器，可以看到变化。

使用 webpack-dev-server 可以实时变化，自动刷新游览器

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

npm install --save-dev webpack-dev-server

修改配置文件，告知开发服务器（dev server），在哪里查找文件

webpack.config.js

  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'
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

以上配置告知webpack-dev-serveer，在localhost:8080下建立服务器，将dist目录下的文件，作为可访问的文件。

添加一个script脚本，可以直接运行开发服务器（dev server）

packge.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

npm start

使用 webpack-dev-middleware 

webpack-dev-middleware是一个容器（wrapper），它可以把webpack处理后的文件传递给一个服务器。

webpack-dev-server在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。

首先，安装express 和 webpack-dev-middleware

npm install --save-dev express webpack-dev-middleware

然后对webpack配置文件做一些调整，以确保中间件（middleware）功能能正确启用

webpack.config.js

  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'
    },
    devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
+     publicPath: '/'
    }
  };

publicPath 也会在服务器脚本用到，以确保文件资源能够在http://localhost:3000下正确访问

设置自定义的express服务

在项目根目录下建立server.js文件

// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

添加一个npm script,更方便的运行服务

packge.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
      "start": "webpack-dev-server --open",
+     "server": "node server.js",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "webpack-dev-middleware": "^1.12.0",
      "xml-loader": "^1.2.1"
    }
  }

在终端运行

npm run server
// 运行之后打开游览器跳转到 http://localhost:3000

调整文本编辑器

在自动编译代码时，可能会在保存文件时遇到一些问题。某些编辑器有“安全写入”功能，可能会影响重新编译。

如何在常用编辑器中禁用此功能：

Sublime Text 3 在用户首选项（user preferences）中添加 atomic_save:"false"

InteliJ 在首选项（preferences）中使用搜索，查到“safe write”并禁用它

Vim 在设置（settings）中增加 :set backupcopy=yes

WebStorm 在 Preferences > Appearance & Behavior > System Settings 中取消选中 Use "safe write"

 

学习资料