zoukankan      html  css  js  c++  java
  • webpack(四)---开发系列

    一、 source map

    devtool: 'inline-source-map'

    现在,让我们来做一些调试,在 print.js 文件中生成一个错误:

    src/print.js

     
      export default function printMe() {
    -   console.log('I get called from print.js!');
    +   cosnole.error('I get called from print.js!');
      }



    二、使用观察模式

     "scripts": {
          "test": "echo "Error: no test specified" && exit 1",
    +     "watch": "webpack --watch",
          "build": "webpack"
        },
    自动打包
    现在,你可以在命令行中运行 npm run watch,就会看到 webpack 编译代码,然而却不会退出命令行。这是因为 script 脚本还在观察文件

    三、用 webpack-dev-server

    webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。让我们设置以下:

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

    webpack.config.js

        devtool: 'inline-source-map',

    +   devServer: {
    +     contentBase: './dist'
    +   },
        plugins: [
          new CleanWebpackPlugin(['dist']),
          new HtmlWebpackPlugin({
            title: 'Development'
          })
        ],

    四、使用 webpack-dev-middleware

    webpack-dev-middleware 是一个容器(wrapper),它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它,同时,它也可以作为一个单独的包来使用,以便进行更多自定义设置来实现更多的需求。接下来是一个 webpack-dev-middleware 配合 express server 的示例。

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

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


    亲测直接按照官网做好了没有坑
    https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-source-map



  • 相关阅读:
    C# 自定义文件图标 双击启动 (修改注册表)
    C/S打包 客户端/windows程序 InstallShield
    WPF 依赖属性
    WPF 自定义Expander
    WPF DevExpress ChartControl用法
    WPF 水平进度条
    WPF 自定义CheckBox
    WPF 自定义ListBox
    WPF 绕圈进度条(一)
    1.为什么要用泛型
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/11581619.html
Copyright © 2011-2022 走看看