webpack - day03

命令运行

  ./node_modules/.bin/webpack  

    在 node_modules/.bin 目录下,存放着大量的cmd文件,运行 webpack 命令文件

  package.json (npm 配置文件  npm init 生成)

    scripts:{

      "webpack1" : "./node_modules/.bin/webpack ",

      "webpack2" :"webpack"  //  方式二  与上面是等价的

    }

    npm run webpack2    --->  npm run 命令,处理路径  “./node_modules/.bin” + path

    (scripts中使用  test start  restart  stop 命名,调用的的时候可以省略 “run” ,  即直接   npm start  )

    npm start 构建的文件默认放在  ./dist 目录  (可以通过配置文件更改)

  更直接的方式 npx

    npx webpack   帮助我们我们定位命令到 “./node_modules/.bin” 目录下

    (npm 使用文档   docs.npmjs.com      --->  CLI documentation )  command line interface 使用文档

webpack及webpack.config.js

  webpack命令在哪个目录下运行,会自动加载目录下的 webpack.config.js 文件;

  webpack --config  指定加载配置文件路径、

  webpack  --help

loaders; 默认只处理  .js 类型的文件,如 图片 css html 等非js类型的文件需要不同的 loader 来实现 

plugins: 主要是扩展 webpack 本身的一些功能,它们会运行在各种模块解析完成以后的打包编译阶段,比如文件的压缩等

     特点:  功能的扩展    运行在打包编译阶段  

webpack.config.js

  const path = require("path");

  module.exports = {  // 抛出一个配置文件

    mode: "development",   --->默认 production

    entry: { aa: "./src/aa.js",  bb: "./src/bb.js" },

    output: {

      path: path.resolve( __dirname, "dist" ),   --> 兼容各操作系统 

      filename: [name]-filename.[hash].js     ---> [ hash ]  [ chunkhash ]  [ name ]  [ id ]  [ query ]

    },

    devtool: "source-map",    // source-map 开启

  }

  模块标识符[ hash] [ id ]       [ chunkhash ]chunk内容hash

  当执行 ./node_modules/.bin/webpack 命令时,自动加载 webpack 配置文件。

   webpack  --config = configFileName

   webpack --mode = development   ( 在 development 模式运行 webpack )

webpackDevServer:

  代码重新编译打包,刷新浏览器(编译后的代码存在内存中,并虚拟一个地址)  ---> 不直接存在硬盘中,更新比较快

  webpack-dev-server  提供了一个简单的 web server

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

  执行:

    npx webpack-dev-server   -----> 启动 web server

    或 package.json 中 添加 scripts   (并修改  webpack.config.js  --> 添加 devServer)

    module.exports = {

      devServer:{

        contentBase:  "./dist",  // 生成虚拟目标路径

        open: true,  // 自动开启浏览器

        port: 8081,  // 端口

        proxy: {   --> 内置了一个代理服务器,把跨域请求转发目标服务器上

          "/api":{

            target: "http://localhost:8087"

          }

        }

      }    

    }

    启动服务以后,webpack不再会把打包后的文件生成到硬盘真实目录了,而是直接存在了内存中

  (同时虚拟了一个存放目录路径),后期更新编译打包和访问大大提升。

  proxy:  开发环境下,前端开发过程中代码会运行在一个服务器环境下(webpack-dev-server),

     那么在处理一些后端请求的时候常会出现跨域的问题。

     内置了一个代理服务器,把跨域请求转发目标服务器上(webpack-dev-server 内置的代理发送的请求属于后端 node,不受同源策略限制)

 

 HMR  webpack内置插件,热更新  --> Hot Module Replacement  

  不同于 live reload 刷新整个页面,无法保持页面操作状态.。( webpack-dev-server 提供了 live relaod  )

  HMR核心: 局部更新 或 模块更新,不刷新页面, 只更新变化的部分

  (webpack 内置插件)

  module.exports = {

    devServer:{

      contentBase: "/dist",

      open: true,

      port: 8081,

      hot: true,    ---> 开启热更新

      hotOnly: true  // 即使 HMR 不生效,也不刷新整个页面(选择开启)

    },

    plugins:[  new webpack.hotModuleReplacementPlugin()  ]  ----> 实例化插件

  }

其他热更新:

  css热更新,   style-loader 中已经集成实现了, 我们只需要 use 中使用就可以了

  React热更新    脚手架中集成

  Vue热更新   脚手架中集成

执行简要流程:

  entry  ---> loaders ---> plugins ---> output

  entry ---> loaders

  loaders ---> plugins

  plugins ---> output  

Node.js  API

  webpack提供了 Node.js API,可以在 Node.js 运行时直接使用;

  webpack仅仅负责编译的部分;   const webpack = require("webpack");  const compiler = webpack({// 配置 }); ----> 获得一个编译实例

  compiler.run(function( err , stats){

    if( err || stats.hasError()){

      // ...

    }

  })

 

posted @ 2020-03-03 01:36  铁塔  阅读(125)  评论(0编辑  收藏  举报