webpack梳理

什么是webpack？

它是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，并根据规则生成对应的静态资源。

好处：减少了js的加载的文件的个数，生成了静态的资源；

安装的过程

首先安装node.js

在安装了node.js之后使用npm工具进行webpack的安装，安装的代码命令是：

npm install webpack -g
//进行全局的安装webapck

webpack的初级的使用：

可以在终端直接进入到我们的项目的文件的目录下，然后将我们需要进行处理的文件的，进行打包：

webpack demo.js bundle.js

上面的代码的含义是将我们的需要构建的demo.js这个文件生成成为我们需要的bundle.js文件他们之间是有一个空格的；

上面的是单个文件的打包的功能，下面的则是多个文件的打包：

首先如果是多个文件的话，这些文件一定是存在对应的依赖关系的，我们进行文件的合并的时候是需要按照这个依赖关系进行的；

一般的来说我们在暴露出去一个文件里面的内容的时候，使用的方法是：

module.exports=


//在等号的后面我们可以接的对象有很多，json ， object，str 。。。。都是可以的

在另外的文件中需要进行文件的接收：

接收的方式我们可以使用的方式有这么几种：

require('')//里面则是这个需要引入的路径了


或者是这样的：


import .. from  ''

使用工具进行文件的打包工作：

样式的打包：

- 通过安装loader加载器，可以将静态的样式文件一同打包到bundle.js文件中，可以通过下面的命令安装我们所需要的加载器

npm install css-loader style-loader

上面实际上是有两个加载器文件的，但是为什么我们会使用两个加载器而不是一个呢，实际上上面我们需要的两个加载器是不一样的，**css-loader**作用是遍历我们的所有的css文件代码，如果在文件中发现import这种则引入尽力啊，另外一个则是直接将我们的css的文直接加载到我们的页面的头部；

在我们的bundle.js文件中我们怎么引入所需的css文件的呢？

require("'!style-loader!css-loader!./style.css'")

上面的代码的引入的顺序是需要注意的，不能够更改

文件的打包的过程：

首先在我们的项目之中进行初始化的设置：
在项目的文件的位置打开终端，输入下面的代码：

npm init

上面的代码的作用会在我们的当前的项目中生成一个package.json文件里面有一些我们的项目相关的信息以及我们安装的一些项目需要的依赖

配置文件的编写

- 在手动的进行编译的时候，我们可以将一些经常性的操作，添加到配置文件，减少我们在编译的过程中的，手写代码的数量，构造自动工具

文件的名称通常是webpack.config.js，在这个文件中我们会进行一些列的编写，下面是我们在进行编译的时候的一个demo的文件

module.exports = {
    entry:'./demo.js',//入口文件的名称
    output: {
        path:_dirname+'/dist',//输出文件的路径
        filename:'bundle.js',//输出的文件的名称
    },
    module: {
        loaders: [
            {
                tests:/\.css$/,//正则，进行我们的文件的匹配
                loader:'style-loader!css-loader'//需要加载的loader依赖
            }
        ]
    }
}

在我们的项目中安装第三方的库：

- 在项目中先安装jQuery第三方库，并在使用的时候，通过require函数将我们需要的文件引入进来

可以看一下面的demo

var $ = require('jquery')

通过webpack讲项目部署到我们的服务端：

我们可以通过安装webpack-dev-server模块，可以将项目打包到服务端，并可以指定端口，同时，还可以设置启动命令；

首先我们需要安装webpack-dev-server按照下面的命令进行安装：

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

安装完成之后我们就在之前的package.json进行文件的配置，这个安装的话同时是需要进行全局安装的

在我们之前的package。json文件中有一个scripts的对象，在这个对象中我们就可以进行文件的配置了，可以根据我们的需要进行文件的配置，可以看下面的例子

scripts: {
    "start": "webpack-dev-server --entry ./src/js/demo.js --output-filename ./dist/bundle.js",
    "build": "webpack --watch"
}

实现文件打包的自动监听，以及修改端口的方法

监听的话可以直接在我们之前的代码的后面添加一个 --watch

注意：我们在使用webpack的时候实际上是默认的将我们的js文件进行打包的不需要使用什么loader进行工具的处理，而在项目中我们使用的js的loader实际上处理的是es6文件的编写

猜你喜欢