简介

webpack 开发环境配置学习笔记。

安装

1、配置 webpack-dev-server 和模块热更新
npm install webpack-dev-server --save-dev

2、开启 SourceMap 调试

3、plugins 添加构建异常和终端处理

4、设置ESLint
npm install eslint babel-eslint eslint-config-airbnb-base eslint-config-standard --save-dev

webpack-dev-server简介

1、webpack-dev-server和http服务器如nginx有什么区别？（Express+hot-middleware）
webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，他比传统http服务队开发更加简单有效。

2、什么是模块热更新？（websocket连接）
是webpack的一个功能，可以使修改后的代码不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。

webpack 配置

module.exports = {
  // == 开发环境服务和代理
  devServer: {
    overlay: true,
    hot: true,
    open: true,
    proxy: {
      '/api': {
        target: 'https://localhost',
        changeOrigin: true,
        logLevel: 'debug',
      },
    },
    // == output 配置项 publicPath: '',
    contentBase: './dist',
    stats: 'errors-only',
  },
  // == 开启 source map
  devtool: 'cheap-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // == 构建异常和终端处理
    function errorPlugin() {
      this.hooks.done.tap('done', (stats) => {
        if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') === -1) {
          process.exit(1);
        }
      });
    },
  ],
  stats: 'errors-only',
};

.eslintrc.js 配置

module.exports = {
  parser: 'babel-eslint',
  extends: 'airbnb-base',
  env: {
    browser: true,
    node: true
  },
  plugins: [
  ],
  rules: [
  ],
};

项目地址

地址: https://github.com/yunaichun/webpack-study

参考资料

results matching ""

No results matching ""