vue第二单元(webpack的配置-学习webpack的常用配置)

第二单元(webpack的配置-学习webpack的常用配置)

#课程目标

1. 掌握webpack的常用配置
2. 掌握如何根据实际的需求修改webpack的对应配置
3. 了解webpack-dev-server的意义和使用
4. 掌握webpack-dev-server的用法

#知识点

1. webpack的配置项

• entry 入口 配置字符串-单个文件 配置数组-会把数组中的文件合并成一份文件，作为入口 配置对象-设置多个入口文件

• mode 告诉webpack相应模式的内置优化 可从cli中传递

  webapck --mode=production
  

  1
  

  选项	描述
  development	会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
  production	会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

• output 用法如下：

      const config = {
          output: {
              filename: 'bundle.js',
              path: '/home/proj/public/assets'
          }
      };
  
      module.exports = config;
  

   
  • filename 用于输出文件的文件名。可使用占位符来区分多个入口点的文件。占位符有[name][id][hash][chunkhash]
  • 目标输出目录 path 的绝对路径。
  • publicPath 用来设置静态资源的url路径，可以使用__webpack_public_path__在入口文件中设置

• module 该配置项用来配置loader，loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

  在 webpack 的配置中 loader 有两个目标：

  1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  2. use 属性，表示进行转换时，应该使用哪个 loader。

  用法如下：

      const path = require('path');
  
      const config = {
      output: {
          filename: 'my-first-webpack.bundle.js'
      },
      module: {
          rules: [
              { test: /.txt$/, use: 'raw-loader' }
          ]
      }
      };
  
      module.exports = config;
  

   

  以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：

  “嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

  重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。然而，在定义错误时 webpack 会给出严重的警告。为了使你受益于此，如果没有按照正确方式去做，webpack 会“给出严重的警告”

  在你的应用程序中，有三种使用 loader 的方式：

  • 配置（推荐）：在 webpack.config.js 文件中指定 loader。(重点)
  • 内联：在每个 import 语句中显式指定 loader。（了解）
  • CLI：在 shell 命令中指定它们（了解）

  内联的用法如下：

  可以在 import 语句或任何等效于 "import" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析

  import Styles from 'style-loader!css-loader?modules!./styles.css';
  

  1
  

  通过前置所有规则及使用 !，可以对应覆盖到配置中的任意 loader。

  选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}

  cli的用法

  webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
  

  1
  

  这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader。

  loader的特性

  • loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
  • loader 可以是同步的，也可以是异步的。
  • loader 运行在 Node.js 中，并且能够执行任何可能的操作。
  • loader 接收查询参数。用于对 loader 传递配置。
  • loader 也能够使用 options 对象进行配置。
  • 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
  • 插件(plugin)可以为 loader 带来更多特性。
  • loader 能够产生额外的任意文件

• plugins plugins 选项用于以各种方式自定义 webpack 构建过程。webpack 附带了各种内置插件，可以通过 webpack[plugin-name] 访问这些插件。可以访问插件列表来查看对应的插件功能

  基本用法如下：

  var webpack = require('webpack');
  // 导入非 webpack 自带默认插件
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var DashboardPlugin = require('webpack-dashboard/plugin');
  
  // 在配置中添加插件
  plugins: [
  // 构建优化插件
  new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor-[hash].min.js',
  }),
  new webpack.optimize.UglifyJsPlugin({
      compress: {
      warnings: false,
      drop_console: false,
      }
  }),
  new ExtractTextPlugin({
      filename: 'build.min.css',
      allChunks: true,
  }),
  new webpack.IgnorePlugin(/^./locale$/, /moment$/),
  // 编译时(compile time)插件
  new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server 强化插件
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  ]
  

   

• devtool devtool的配置可以增强调试过程，配置不同的值，可以影响打包的速度。 具体的配置参考 devtool文档

• resolve 什么是 webpack 模块 在说解析之前，我们先说说webpack模块这个概念 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下： - ES2015 import 语句 - CommonJS require() 语句 - AMD define 和 require 语句 - css/sass/less 文件中的 @import 语句。 - 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url) webpack在构建依赖图的时候会根据导入语句去分析模块路径，resolve选项在于如何配置模块的引入。 具体的配置参考 resolve配置

2. webpack-dev-server的使用和配置 webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

我们需要安装webpack-dev-server

npm install webpack-dev-server -D

1

在webpack.config.js的配置中可以添加devServer项，用来指导服务器相关的功能

   {
       devServer: {}
   } 

 

具体的配置参考：devServer配置

#授课思路

#案例和作业

1. 一下是第一天的看看会员页面

看看会员

根据今天所学的知识，在昨天环境的基础上加入devServer的配置。使开发可以自动在浏览器环境下预览，并自动刷新

2. 自行了解单页面（spa），搭建单页面应用的开发环境，完成下图的开发