01-快速入门webpack模块化打包工具

一、基本概念

1.1、什么是webpack？

        webpack 是一个现代的JavaScript应用的静态模块打包工具.

webpack核心：

1. 处理js之间相关的依赖，就是让我们进行模块化开发，
2. 给webpack扩展对应的loader。要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等转换成可以在浏览器上运行的代码。

1.2、webpack与grunt/gulp的区别？

       runt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
       webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

二、webpack安装

       webpack为了可以正常运行必须依赖node环境，node环境为了正常执行很多代码，必须其中各种依赖的包工具。

2.1、node安转

       下载node软件并安装，下载地址 选择自己电脑相应的版本，然后点击下一步下一步安装就行。

2.2、webpack安装

       安装命令，打开cmd并输入npm i webpack -g

三、webpack基础

3.1、js文件打包

3.1.1、创建文件夹

       我的文件目录如下：先暂时用bbb.js代替main.js(入口)

3.1.2、打包文件

       要想把我们所写的模块化静态资源打包成我们引入的静态资源，我们打开cmd并找到我们当前写的文件所在的目录。输入 webpack 打包文件的目录 打包到的文件目录

3.1.3、引入文件

       打包完成后，我们就可以把打包后的资源引入文件了。

3.2、webpack基础文件配置

3.2.1、初试化 node 并下载开发时依赖的 webpack（全局的）

打开我们写的文件所在的cmd

1. npm init初始化node
2. npm i webpack@3.6.0 --Save-dev下载开发时依赖的webpack

3.2.2、webpack.config.js基本配置

webpack.config.js 基本的路径配置如下

       注意：此时我们在终端直接输入webpack 就可以运行文件了,但是我们此时运行的是全局的webpack,一旦我们的项目拷贝给其他人，可能会出现问题，因为一个项目往往依赖特定的 webpack 版本，全局的版本可能很这个项目的 webpack 版本不一致，导出打包出现问题。因此通常一个项目，都有自己局部的webpack，所以我们还需要对其package.json配置。

3.2.3、package.json配置（运行局部的webpack）

我们可以对我们自己的项目下载一个使用npm i webpack@3.6.0 --Save-dev局部的webpack，并通过package.json使用映射到我们的项目webpack。所以我们可以直接使用npm run build打包。
### 3.2.4、npx（运行局部的webpack）
npx 是 Node.js 8.2.0版本引入的一个命令行工具，用于执行安装在 node_modules/.bin目录下的可执行文件。它的作用是在不全局安装模块的情况下，直接运行项目中安装的模块的可执行文件。所以可以使用 npx webpack来执行项目中安装的webpack模块中的 webpack 命令。

四、webpack加载js以外的文件—loader转换

       给webpack扩展对应的loader 。loader主要用于转换某些类型的模块，它是一个转换器。转换css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等转换成可以在浏览器上运行的代码。更多详情请点击

4.1、转换css 文件

4.1.1、安装

1. npm install --save-dev css-loader
2. npm install --save-dev style-loader

4.1.2、配置webpack.config.js

module.exports = {
   
   
  module: {
   
   
    rules: [
      {
   
   
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

4.1.3、创建css文件，并引入到我们入口的js中

以上就是我们的基本步骤，接下来运行即可：

4.2、转换图片

4.2.1、导入图片并安装

安装命令npm install --save-dev url-loader

4.1.2、配置 webpack.config.js 并运行报错 Module build failed: Error: Cannot find module ‘file-loader’

	 module: {
   
   
        rules: [{
   
   
                //css-loader只负责将css文件进行加载
                //ts-loader负责将样式添加到DOM中
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }

       这里的错误时由于limit的限制导致的，当加载的图片，大于limit时，需要使用file-loader模块进行加载，所以我们还需要安装npm install --save-dev file-loader