Webpack(一)

Webpack

什么是WebPack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
- 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
- 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
- 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

安装webpack

具体安装方法：
- 用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码：
  1. mkdir webpack_demo //这句是建立文件夹
  2. cd webpack_demo //进入这个文件夹
- 通过下面命令安装WebPack。
  需要注意的是,你在执行下一步时必须安装node，可以通过 node -v来查看node安装情况和版本，如果没有安装，要先安装node才可以继续进行.
  //全局安装 3.npm install -g webpack
  如果你这时安装失败了（出现了报错信息），一般有三种可能：
  - 检查你node的版本号，如果版本号过低，升级为最新版本。
  - 网络问题，可以考虑使用cnpm来安装（这个是淘宝实时更新的镜像）,具体可以登录cnpm的官方网站学习http://npm.taobao.org/。
  - 权限问题，在Liux、Mac安装是需要权限，如果你是Windows系统，主要要使用以管理员方式安装.

注意：全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败

对项目目录进行安装
4. npm init //初始化项目，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等
5. npm install --save-dev webpack //进行项目目录的安装，这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用
6. webpack -v //查看webpack版本

建立基本项目结构

在根目录建立两个文件夹，分别是src文件夹和dist文件夹
- src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
- dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
- 你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境
编写程序文件：
- dist文件下手动建立一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jspang webpack</title>
</head>
<body>
    <div id="title"></div>
    <script src="./bundle.js"></script>
</body>
</html>

这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。我们的index.html写好后，接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件

src/entery.js

document.getElementById('title').innerHTML='Hello Webpack';

打包
- {entery file}:入口文件的路径，本文中就是src/entery.js的路径；
- {destination for bundled file}:填写打包后存放的路径。
- 注意：在命令行中是不需要写{ }的

webpack {entry file} {destination for bundled file}

所以例子中执行：

webpack src/entry.js dist/bundle.js

这里写图片描述

但是在webpack4中执行以上操作会报错，报错信息会提醒，会报缺少webpack-cli，所以要添加上webpack-cli回车安装下
安装完之后执行webpack-v才能出现版本号，但是执行打包操作还是会报错

webpack官网更新日志有说明：webpack升级4.0新增mode属性

解决方法：

package.json中设置
"scripts": { "dev": "webpack --mode development", // 开发环境 "build": "webpack --mode production", // 生产环境 },
webpack.config.js中设置

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    mode: 'development' // 设置mode
}

配置文件：入口和出口

配置文件 webpack.config.js
webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版
module.exports={ //入口文件的配置项 entry:{}, //出口文件的配置项 output:{}, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} }
- entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
- output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
- module：配置模块，主要是解析CSS和图片转换压缩等功能。
- plugins：配置插件，根据你的需要配置不同功能的插件。
- devServer：配置开发服务功能，后期我们会详细讲解。
  命令执行成功后，会在dist目录下出现bundle.js文件，这时我们就可以在浏览器中预览结果了，网页中显示出了Hello Webpack的信息。
  案例中的配置如下：

const path = require('path');  //需在头部移入path,否则找不到path
module.exports={
    //入口文件的配置项
    entry:{
        entery:'./src/entery.js'  //写的那个js代码路径
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),  
        //输出的文件名称
        filename:'bundle.js'   //打包后放在的文件名
    },
    mode: 'development', // 设置mode   webpack4添加mode属性
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

这个代码写完后，可以在终端中直接输入webpack就会进行打包

多入口、多出口配置

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件

配置文件：服务和热更新

webpack-dev-server:是一个小型的Node.js Express服务器
设置webpack-dev-server:要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev 来进行下载的。下载好后，需要配置一下devServer。最简单的devServer配置项只有四个
/webpack.config.js

  devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }

  - contentBase:配置服务器基本运行路径，用于找到程序打包地址。
  - host：服务运行地址，建议使用本机IP，这里为了讲解方便，所以用localhost。
  - compress：服务器端压缩选型，一般设置为开启，如果你对服务器压缩感兴趣，可以自行学习。
  - port：服务运行端口，建议不使用80，很容易被占用，这里使用了1717

安装：npm install webpack-dev-server --save-dev
在package.json里面添加：
/package.json
"scripts": { "server":"webpack-dev-server" },
配置好保存后，在终端里输入npm run server 打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。
支持热更新
在npm run server 启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。

模块：CSS文件打包

Webpack在生产环境中有一个重要的作用就是减少http的请求数，就是把多个文件打包到一个js里，这样请求数就可以减少好多。把css文件打包，需要先对webpack.config.js里的Loaders配置项进行了解。

Loaders
Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通过使用不同的Loader，Webpack可以的脚本和工具，从而对不同的文件格式进行特定处理。
- 可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
- 可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
- 可以把React中的JSX转换成JavaScript代码

注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。

test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
打包CSS文件：要打包CSS你必须先要有个CSS文件，在/src目录下，我们建立一个css文件夹，在文件夹里建立index.css文件。代码内容如下
./src/css/index.css
body{ background-color: red; color: white; }
CSS文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。
/src/entery.js中在首行加入代码
import css from './css/index.css';
CSS和引入做好后，我们就需要使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader.
npm install style-loader --save-dev
npm install --save-dev css-loader
在webpack.config.js进行配置loader
module:{ rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] },
再执行以上的操作即可有样式效果

插件配置：配置JS压缩

现在你写的JS代码，在上线之前，都是需要进行压缩的，在没有webpack和gulp这些工具前，你可能需要找一个压缩软件或者在线进行压缩，在Webpack中可以很轻松的实现JS代码的压缩，它是通过插件的方式实现的，这里我们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。

注意：虽然uglifyjs是插件，但是webpack版本里默认已经集成，不需要再次安装。

引入：我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件
const uglify = require('uglifyjs-webpack-plugin');
引入后在plugins配置里new一个 uglify对象就可以了，代码如下
plugins:[ new uglify() ],

const path=require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports={
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins:[
        new uglify()
    ],
    devServer:{
       contentBase:path.resolve(__dirname,'dist'),
       host:'192.168.0.104',
       compress:true,
       port:1717
    }
}

插件配置：HTML文件的发布

index.html直接放到了dist文件夹下，这肯定是不正确的，应该放到我们src目录下。但是前期我们为了循序渐进的学习，所以把index.html放到了dist目录下。这节课我们就学习如何把html文件打包到我们的生产路径下.
+ 打包HTML文件
我们先把dist中的html文件剪切到src目录中，并去掉我们的JS引入代码（webpack会自动为我们引入JS），因为这才是我们真实工作的目录文件结构。
然后我们配置webpack.config.js文件，先引入我们的html-webpack-plugin插件
const htmlPlugin= require('html-webpack-plugin');
引入后使用npm进行安装包
npm install --save-dev html-webpack-plugin
最后在webpack.config.js里的plugins里进行插件配置

new htmlPlugin({
 minify:{
         removeAttributeQuotes:true
     },
     hash:true,
     template:'./src/index.html'

 })

minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
template：是要打包的html模版路径和文件名称。
上边的都配置完成后，我们就可以在终端中使用webpack，进行打包。你会看到index.html文件已经被打包到我们的dist目录下了，并且自动为我们引入了路口的JS文件