项目构建工具--webpack

什么是webpack

Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理编译打包,它将根据模块的依赖关系进行静态分析，生成对应的静态资源（将所有这些模块打包成一个或多个 bundle）

学习网址：
http://webpack.github.io/ (英文官网)

https://www.webpackjs.com/ 中文官网
   http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/(系列教程)
   https://github.com/nimojs/webpack-book(webpack入门指南)
   http://www.jianshu.com/p/bb48898eded5(教程)

在开始前你需要先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，

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

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

配置文件(默认)webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象。在配置文件里配置核心概念的配置信息

接下来讲解如何使用webpack

1.初始化项目：生成package.json文件

{
"name": "webpack_test",
"version": "1.0.0"
}

2.安装webpack
npm install webpack -g //全局安装
npm install webpack --save-dev //局部安装

3.编译打包应用

创建入口src/js/ : entry.js；名字可以随意起，起entry容易理解

document.write("entry.js is work");

创建主页面: dist/index.html

<script type="text/javascript" src="bundle.js"></script>

编译js

webpack src/js/entry.js dist/bundle.js

左边是源文件，右边是将文件编译打包的路径及文件名

查看页面效果：entry.js is work

4.添加js/json文件

src/js/math.js

export function square(x) {return x * x;}export function cube(x) {return x * x * x;}

src/json/data.json

{"name": "libufan","age": 18
}

6.更新入口js : entry.js

        import {cube} from './math'import data from '../json/data.json'//注意data会自动被转换为原生的js对象或者数组document.write("entry.js is work <br/>");document.write(cube(2) + '<br/>');document.write(JSON.stringify(data) + '<br/>')

7.编译js:

 webpack src/js/entry.js dist/bundle.js

查看页面效果

每次打包编译还需要写路径比较麻烦，介绍一种简单的方法；

8.使用webpack配置文件

创建webpack.config.js文件

              const path = require('path'); //path内置的模块，用来设置路径。module.exports = {entry: './src/js/entry.js',   // 入口文件output: {                     // 输出配置filename: 'bundle.js',      // 输出文件名path: path.resolve(__dirname, 'dist/js')   //输出文件路径配置}};

直接在终端使用webpack命令就可以了

webpack

我们还可以配置npm命令,在package.json文件中加入以下内容

"scripts": {"build": "webpack"},

打包应用就可以使用下面命令

 npm run build

9.打包css和图片文件

webpack自身只理解js和json所以打包css和图片文件需要加载器loader

安装

    npm install css-loader style-loader --save-dev  //加载样式npm install file-loader url-loader --save-dev   //加载图片

style-loader加载器将css-loader加载到的样式，动态的添加到<style>标签中
url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。url-loader依赖于file-loader。

配置loader

 module: {rules: [{test: /\.css$/,use: ['style-loader',//将cssloader加载到的样式，动态的添加到style标签里'css-loader']},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192      //图片小于8k，会转化成base64的编码形式，（字符串）打包到bundle.js//减少资源请求}}]}]}

向应用中添加2张图片:小图: src/image/logo.png//图片小于8kb大图: src/image/big.jpg//图片大于8kb

创建样式文件: src/css/test.css

body {background:rebeccapurple;
}
#box1{width: 300px;height: 300px;background-image: url("../image/logo.jpg");
}
#box2{width: 300px;height: 300px;background-image: url("../image/big.jpg");
}

更新入口js : entry.js导入css , import '../css/test.css'

index.html添加元素

<div id="box1"></div><div id="box2"></div>

执行打包命令：

 npm run build

运行后发现问题：大图无法打包到entry.js文件中，大图在dist/js路径下，index.html在dist路径下，不在生成资源目录下，页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到，页面无法显示大图

解决办法：将index.html放在dist/js/路径下可以解决。如下图所示

在写项目中偶然发现一个解决办法，但不知道有没有弊端，仅供参考，index.html页面不放在/js下面，和刚开始一样放在dist文件夹下

我们修改配置文件信息：

output: {path: path.resolve(__dirname, 'dist/'),filename: 'js/bundle.js'},

然后运行

npm run build

大图和index.html同级，index.html可以直接找到大图

10.webpack --watch

我们可以用 webpack --watch 命令，打包编译监视，文件若有改动帮你自动重新编译打包，但页面需要手动刷新，

下面介绍一种方法，自动刷新页面

11.自动编译打包

自动编译打包需要利用webpack开发服务器工具: webpack-dev-server

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

webpack-dev-server服务器先读配置文件，服务器将所有的源文件读到服务器的虚拟内存，然后打包成一个文件bundle.js，也在服务器的虚拟内存，不再本地(文件名根据配置文件设置生成）。
服务器默认服务于项目根路径下的index.html，但我们通常将index.html文件放在dist路径下，这时服务器不服务于dist/index.html，所以我们要修改配置文件，让服务器服务dist/index.html

在webpack.config.js中添加一下信息

devServer: {//服务器默认服务于项目根路径下的index.html,contentBase: './dist'//设置服务器服务地址，服务dist文件夹下的index.html},

运行

webpack-dev-server

然后访问终端给出的网址：http://localhost:8080 访问就可以了

也可以在package配置"start": "webpack-dev-server --open"

编译打包运行一下命令：

npm start

使用webpack插件

常用的插件:

* 使用html-webpack-plugin根据模板html生成引入script的页面

* 使用clean-webpack-plugin清除dist文件夹

* 使用uglifyjs-webpack-plugin压缩打包的js文件

使用步骤：

1.下载插件

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

2.在webpack.config.js配置文件中引入

 const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的文件

3.在webpack.config.js添加配置

 plugins: [new htmlWebpackPlugin({template: './index.html'}),new cleanWebpackPlugin('./dist')]

{template: './index.html'}，index.html是模板路径，生成的html自动和bundle.js在同一路径下

生成页面如下，引入js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

new cleanWebpackPlugin('./dist')，当编译打包时，webpack会先清除‘./dist’文件夹