Webpack学习笔记

    webpack(模块打包机)主要的作用是打包、转换(将非标准的语言语法转化为标准的)以及优化(提升性能)。

一、wepack安装

    1、新建文件夹：mkdir webpack_p

    2、进入文件夹：cd webpack_p

    3、全局安装webpack：npm install -g webpack (npm依赖node，需要提前安装node，否则会报错)

    4、初始化一个webpack.json文件，参数y表示跳过提问阶段，直接使用默认配置：npm init -y

    5、为项目安装依赖模块(--save-dev表示将该依赖模块添加到webpack.json中的devDependencies中去，在开发环境中使用；--save表示将该依赖模块添加到dependencies中，在生产环境中使用)：npm install --save-dev webpack

安装完成后，文件夹中共增加三个文件:

    node_modules：项目依赖的安装包

    package-lock.json：当 node_modules 或 package.json 发生变化时自动生成的文件，作用是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新

    package.json：项目的说明文件，管理项目所需的npm包

    注：如果需要更新webpack版本，有两种方法，

        1、在新建项目时，使用npm init即可(适用于新项目)

        2、删除本地node_modules文件夹，更改package.json文件中webpack的版本号，使用npm install 命令即可更新webpack以及所有依赖包

二、新建一个小demo

    1、在项目目录中新增两个文件夹，

        src：源文件夹，存放开发代码

        dist：目标文件夹，生成用于用户生产环境中的代码

    2、建立index.html文件，并在文件中引入bundle.js文件(bundle.js文件存放打包后的js文件，名称可以任取，后续会提到)，./表示同级目录。

    3、在src文件夹中建立入口文件entery.js文件

    4、使用webpack命令打包入口文件到dist目录中，-o命令指定打包后的文件名，默认为main.js：webpack src/entery.js -o dist/bundle.js ，生成bundle.js文件

红框中数字表示打包后的文件大小

    5、启动项目，使用live-server插件(作用：搭建服务、启动项目、浏览器自动刷新)，如果未安装，使用全局命令进行安装：npm install -g live-server ，安装完成后启动项目：live-server

    6、打开dist文件夹即可展示页面

三、webpack配置

    1、创建webpack.config.js文件，做一个接口并暴露出来：module.exports = {}，其中配置项一共有五项：

        entry：入口文件

        output：出口文件

        module：模块，用于打包、图片转换压缩等配置

        plugins：项目中所需的插件(数组，可以有多个，其余的都是对象)

        devserver：配置的开发服务

    2、entry入口文件，采用 变量名:路径 的形式，变量名任取，可以使用多个(多入口)

    3、output出口文件，共两个参数，path为出口文件的地址，filename表示出口文件名

           注：path.resolve(__dirname,'dist')，是node里的一种查找指定文件名绝对路径的方法

    4、多入口多出口的情况如下，出口文件的名称直接使用[name].js来生成相应的代码

    5、终端直接使用命令 webpack 即可

    6、devServer配置,

        设置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 来进行安装webpack-dev-server了， 命令如下：

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

这是本地安装，所以使用了–save-dev。

配置好后，你可以试着在终端中输入webpack-dev-server,如果可以执行成功，但是往往提示下面的错误（或者是无法找到内部或外部命令）。

出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。

/package.json

"scripts": {

    "server":"webpack-dev-server"

},

配置好保存后，在终端里输入 npm  run  server 打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。

支持热更新

在npm run server  启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。