webpack入门

2018-01-22 本文已影响0人无言_4f45

何为模块？

如果你曾学过 Java , C# 之类的语言，一定会知道 Java 中的 import 或 C# 中的 using 吧？
比如：我想在 C# 中进行数据库操作，我只需要在代码头部加上下面这两段代码即可。
using System.Data; using System.Data.SqlClient;

这两段代码可以看成两个与数据库操作相关的模块。
当我们需求是数据库，或者是读取 IO 等其他操作，我们便加载其他不同的模块。

很明显，这实现了编程中的一个非常重要的功能按需加载。

在前端中模块又该如何定义呢？

按照我个人的理解：

在 HTML 中模块便是一个组件

<div class="layer"> 
  <div><%= name %></div>
 <% for(var i = 0; i < People.length;++i) { %> <%= People[i] %> <% } %> </div>

在 CSS 中模块便是一个局部样式

header{ display:block; } 
header h1{ font-size: 60px; }

在 Javascript 中模块便是一个封装着方法或数据的脚本文件

let People = { name: "Simon" } ; 
module.exports = People;

而我们又该怎样实现在前端中加载模块呢？

下面是两个很常见的例子：

在 Less 中

@import "header"; 
@import "layout"; 
@import "footer";

在 Javascript

// CommonJS const $ = require("jQuery"); 
//es6 let People = { name: "Simon" } ; 
module.exports = People; import "./layer.less"; 
import tpl from "./layer.ejs";

如果你直接运行以上代码，浏览器并不会解析，这个时候，就要依靠 Webpack 了！
按照我个人的理解：

在 HTML 中模块便是一个组件

<div class="layer"> 
<div><%= name %></div> 
<% for(var i = 0; i < People.length;++i) { %> <%= People[i] %> <% } %> </div>

在 CSS 中模块便是一个局部样式

header{ display:block; } header h1{ font-size: 60px; }

在 Javascript 中模块便是一个封装着方法或数据的脚本文件

let People = { name: "Simon" } ; 
module.exports = People;

而我们又该怎样实现在前端中加载模块呢？

下面是两个很常见的例子：

在 Less 中

@import "header"; 
@import "layout"; 
@import "footer";

在 Javascript

// CommonJS 
const $ = require("jQuery"); 
//es6 
let People = { name: "Simon" } ; 
module.exports = People; 
import "./layer.less";
import tpl from "./layer.ejs";

如果你直接运行以上代码，浏览器并不会解析，这个时候，就要依靠 Webpack 了！

Webpack是什么

Webpack 是一款目前非常流行的前端模块打包工具，可以将项目中所加载的模块进行打包，以及将一些浏览器不支持的语言进行转换。

Webpack 的打包原理是先找到入口文件，递归探索出所有依赖的模块，最后利用 Loader 进行不同文件类型的处理，打包成一个 Javascript 文件。

其中，Webpack 的两个最核心原理分别是：

一切皆模块

按需加载

当然 Webpack 的作用不止加载模块这么简单，前端的常用需求通常都可以实现：利用 Loader 转换 es6 、 Less 、 Typescript ，还可利用插件开发多页面应用,等等诸多强大功能。

正文
下面，我将讲解 Webpack 的具体使用和配置。

安装

我一般在项目中使用 Webpack，都是先执行下面这四条命令进行 Webpack 的安装

npm install -g webpack

在全局安装 Webpack，第一次使用时执行

npm install --save-dev webpack

将 Webpack 安装到你的项目

npm init

npm初始化，会询问你的项目信息，可以回车跳过

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

在当前项目，安装 Webpack 服务器。安装完成后，便是建立配置文件了。

基本配置

在项目根目录下新建名为 webpack.config.js 的文件，

基本上一个配置文件的大体结构就是下面这样：

modules.export={ 
entry:{ /* 入口文件 */ }, 
output:{ /* 出口文件 */ }, 
module:{ /* Loader */ 
rules:[{},{},{}] }, 
plugins:[ /* 插件 */ ],
devtool: ... 
devServer: {...} 
resolve:{...} 
}

我们下面就先分析 modules.export 各个属性

入口

entry

代表是入口文件，Webpack 工作的开始。Webpack 会递归的探索出入口文件中所依赖的模块，并按照顺序利用 Loader 进行处理。

官网给出了其 3 种数据类型：

字符串

entry: "app.js";
数组

数组中的每一项都会被打包，形成互不依赖的文件

entry: ["app.js","main.js"];

对象

对象中的每一个属性都会被打包，形成互不依赖的文件

entry:{ app: "./src/js/app.js", main: "./src/js/main.js" }

一般入口文件中多是 import 或者 require 等模块导入命令。

出口

output：顾名思义，Webpack打包后文件的具体配置

常用的属性有 4 个

//打包后文件所在路径
path: ${__dirname }/dist
//打包后文件的名字，这里有 4 种常用的写法
filename: "js/[name].js"
//代表的便是入口的文件名
[name].js
//此次打包后的hash值
[hash].js
//该块打包后的hash值
[chunkhash]
上线时的公共路径，主要应用于线上
publicPath: "http://cdn.com/"
//按需加载模块时输出的文件名称
chunkFilename: 'js/[name].js'

Loader

将一切浏览器不支持的语言，处理成浏览器可以支持。针对各个文件类型，都有各种的 Loader 等你去挖掘。

Loader 的工作方式是从右向左执行，链式地按照顺序进行编译。loader 链中的第一个返回值给下一个 loader，在最后一个 loader，返回所预期的结果。

loader 可以是同步或异步函数，也可使用 options 对象去接受配置参数。

基础结构

module:{  
  rules:[ 
      {  
          test:/\.xxx$/,//以xxx结尾的文件  
          loader: "xxx-loader", 
          exclude: {排除的路径},  
          include: {包含的路径},  
            options: {
                Loader配置
              } 
        } 
      ] 
  }

Loader 利用 test属性的正则找到各个类型文件，然后使用 loader 进行处理，便可转换成浏览器支持的文件。

其中我知道的 loader 的写法有两种:

每一个 loader 都是一个对象

loaders:[ 
  {loader:"style-loader"}, 
  { loader: "css-loader?modules",
   options: { importLoaders: 1 } 
  }, 
  {loader: "less-loader"}
 ]

使用 ! 号拼接的写法

loader: "style-loader!css-loader?importLoaders=1!less-loader"

下面介绍三个前端必备的 Loader 方式

#### css

1. style-loader

通过注入<style>标签将 CSS 添加到 DOM

```
npm install style-loader --save-dev
```

2. css-loader

> css-loader像import / require（）一样解释@import和url（）并解析它们。

```
npm install css-loader --save-dev
```

3. postcss-loader

> 补充 不兼容的css属性 的浏览器前缀

```
npm install post-loader --save-dev
```

4. less-loader

将Less 转换成 CSS

npm install less --save-dev npm install less-loader --save-dev

5. babel

主要用于将 es6 转换成 es2015

npm install --save-dev babel-core babel-loader babel-preset-es2015

6.file-loader

用于压缩文件

npm install --save-dev file-loader

7. url-loader

如果文件下于规定限制，将会转换成二进制编码

npm install --save-dev url-loader

插件 -plugins

在日常工作中，我们使用 Loader 处理不同类型的文件，当有某种其他方面的需求时，比如抽离 CSS 、生成多页面 HTML ，plugins 便派上了用场。
插件的使用，一般都要先 require 出来，然后在 plugins 属性中进行初始化

const htmlWebpackPlugin = require("html-webpack-plugin"); 
...... 
plugins: [ 
  new htmlWebpackPlugin (
    ......
)]

下面将介绍一些工作中常用的插件

1. clean-webpack-plugin

主要用于打包之前先清空打包目录下的文件，防止文件混乱。

npm install --save-dev clean-webpack-plugin

2.html-webpack-plugin

主要用于生成HTML，可以规定模板HTML，也可以为模板传入参数，压缩文件等

npm install --save-dev html-webpack-plugin

这个插件可谓是前端必备的，它的配置有很多


new htmlWebpackPlugin({
  //打包后的文件名
  filename: "index.html",
  //模板
  template: "index.html",
  //为true自动生成script标签添加到html中
  //或者写 body/head 标签名
  inject: false,//js的注入标签
  //通过<%= htmlWebpackPlugin.options.title %>引用
  title: "参数title",
  //通过<%= htmlWebpackPlugin.options.date %> 引用
  date: new Date()
  //网站的图标
  favicon: 'path/to/yourfile.ico'
  //生成此次打包的hash, 如果文件名中有哈希，便代表有 合理的缓冲
  hash: true,
  //排除的块
  excludeChunks: [''],
  //选中的块 与入口文件相关
  chunks: ['app','people'],
  //压缩
  minify:{
    removeComments: true,collapseWhitespace: true,
    minifyJS: true, minifyCSS: true,minifyURLs: true,
  }
}),
那么问题来了，我们在模板文件中 又该怎样使用参数呢？ 直接按照 ejs 的语法写入 html 文件即可！

html:

<%= htmlWebpackPlugin.options.date %>

生成后的模板文件

<!DOCTYPE html> 
  <html lang="en"> 
    Thu Dec 07 2017 10:01:58 GMT+0800 (中国标准时间) 
  </html>

另外，如果想生成多页面应用，只需将上面的配置，多复制几遍即可。

new htmlWebpackPlugin({ filename: "index1.html", } 
new htmlWebpackPlugin({ filename: "index2.html", } 
new htmlWebpackPlugin({ filename: "index3.html", }

3.UglifyJsPlugin

主要用于压缩 Javascript 文件

npm i -D uglifyjs-webpack-plugin

4.webpack.ProvidePlugin

自动加载模块，全局使用变量，下面借助官网的DEMO

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
 // in a module $('#item'); // <= 起作用 jQuery('#item');
 // <= 起作用 // $ 自动被设置为 "jquery" 输出的内容

5.open-browser-webpack-plugin

打开服务器后会自动打开浏览器端口，用起来很方便

6.HotModuleReplacementPlugin

热更新插件

常用命令

webpack

最基本的启动webpack命令

webpack -w

监控代码变化，实时进行打包更新

webpack -p

对打包后的文件进行压缩，利用线上发布

webpack -d

提供SourceMaps，方便调试代码

webpack --colors

输出结果带彩色，可以更详细的查看信息

webpack --profile

输出性能数据，可以看到每一步的耗时

devtool

不知道你现在时候有没有一个想法？ webpack 打包后的文件就一定正确无误吗？如果发生错误的话，该怎么办呢？

devtool 属性便提供了生成 sourcemap 的功能，具体有下面这些选项。
source-map

此选项具有最完备的source map，但会减慢打包的速度；

cheap-module-source-map

生成一个不带列映射的map

eval-source-map

使用eval打包源文件模块，生成一个完整的source map。

cheap-module-eval-source-map

这是最快生成source map的方法，生成后的Source Map 会和打包后的,JavaScript 文件同行显示，但没有列映射，所以慎用

devServer

本地服务器所加载的页面所在的目录

contentBase: "./dist",

再找不到文件的时候默认指向index.html

historyApiFallback: true,

当源文件改变时会自动刷新页面

inline: true,

热加载开启

hot: true,

设置默认监听端口

port:8080

resolve

自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名

extensions: [".js", ".html", ".css", ".txt","less","ejs","json"],

模块别名定义，直接 require('AppStore') 即可,方便后续直接引用别名

alias: { Temp: path.resolve(__dirname, "src/templates/") }

其他功能

常用于字符串拼接路径。

const path = require("path");

有两个 API

//将相对路径转换成绝对路径
path.resolve()
// aPath = 当前目录下的 js 文件夹的 main.js 文件的路径
const aPath = path.resolve("__dirname","js","main.js"); 
path.join()//对路径进行拼接
const rPath = path.join("source","js","main.js"); // aPath = //source/js/main.js

//__dirname
//Node.js 中的全局变量，代表的是 项目的当前路径。常与 path 结合使用。

热更新

上面我们已经提过了 webpack -w 命令，它可以实时的监控代码的改变，从而自动进行打包，但是有个缺点在于它不能及时的刷新界面。

在我们开启服务器后，是无法使用此命令的，这个时候，如果你还想进行自动打包，又想自动刷新界面，热更新便是不二之选，另外 Webpack 只会热更新发生改变的模块，不会重新加载整个页面，便可加快开发速度。

开启步骤：

修改 devServer属性

devServer: { 
  hot: true,//热加载开启 
  inline: true,//文件改变时会自动刷新页面
 }

增加热更新插件jsx

const webpack = require("webpack");
//Other property
plugins: [
new webpack.HotModuleReplacementPlugin()]

另外，只有修改依赖的项目，才会进行实时更新。

原文地址:http://makaidong.com/Leo_wl/9415_12649568.html

webpack入门

何为模块？

在前端中模块又该如何定义呢？

Webpack是什么

一切皆模块

按需加载

安装

基本配置

入口

entry

出口

output：顾名思义，Webpack打包后文件的具体配置

Loader

下面介绍三个前端必备的 Loader 方式

1. style-loader

2. css-loader

3. postcss-loader

4. less-loader

5. babel

6.file-loader

7. url-loader

插件 -plugins

1. clean-webpack-plugin

2.html-webpack-plugin

3.UglifyJsPlugin

4.webpack.ProvidePlugin

5.open-browser-webpack-plugin

6.HotModuleReplacementPlugin

常用命令

devtool

devServer

resolve

其他功能

热更新

猜你喜欢

热点阅读

webpack入门

何为模块？

在前端中 模块又该如何定义呢？

Webpack是什么

一切皆模块

按需加载

安装

基本配置

入口

entry

出口

output： 顾名思义，Webpack打包后文件的具体配置

Loader

下面介绍三个 前端必备的 Loader 方式

1. style-loader

2. css-loader

3. postcss-loader

4. less-loader

5. babel

6.file-loader

7. url-loader

插件 -plugins

1. clean-webpack-plugin

2.html-webpack-plugin

3.UglifyJsPlugin

4.webpack.ProvidePlugin

5.open-browser-webpack-plugin

6.HotModuleReplacementPlugin

常用命令

devtool

devServer

resolve

其他功能

热更新

猜你喜欢

热点阅读

在前端中模块又该如何定义呢？

output：顾名思义，Webpack打包后文件的具体配置

下面介绍三个前端必备的 Loader 方式