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

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

#课程目标

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

#知识点

webpack的配置项

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

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

webapck --mode=production

选项	描述
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配置

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

我们需要安装webpack-dev-server

npm install webpack-dev-server -D

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

   {

       devServer: {}

   }

具体的配置参考：devServer配置

#授课思路

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

#案例和作业

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

看看会员

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

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

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

秒客网

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

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

#课程目标

#知识点

#授课思路

#案例和作业

相关文章