webpack学习记录(一)1. webpack是什么？默认：默认只能处理JavaScript，其他类型文件需要配置l

本章内容：

webpack是什么
为什么要使用webpack
怎么配置webpack
如何使用webpack命令

1. webpack是什么？

webpack 是一个现代 JavaScript 应用程序的静态模块打包器

特性：

默认：默认只能处理JavaScript，其他类型文件需要配置loader或者plugins进行处理。
打包：将各个依赖文件进行梳理打包，形成一个JS依赖文件。
功能强大，loader和plugins可以根据个人需要随意配置。例如将es6转成es5的，将less、sass转成css等。

2.为什么要使用webpack

2.1没有打包的困扰

假设我们有三个js文件，浏览器需要发送三次http请求来获取这三个文件，然后依次执行其中的代码，如果其中有一个文件因为网络问题而延误了时间，那么整个页面的显示也会被延误。3个文件还好，而当我们的项目逐渐变大，有几十个到上百个JavaScript文件的时候，那问题会更严重。

如果我们能把这三个文件合成一个文件这样是不是就好了？的确只有一个文件的话会减少http请求次数，加快渲染速度，并且打包的过程还能压缩代码体积。webpack在打包过程中，会分析各个文件之间的依赖关系，然后生成一个依赖图并用文件的形式保存下来，未来浏览器运行代码的时候就可以读取这个文件，就知道了各个代码块之间的关联以及如何调用了。

2.2支持模块化

除此之外webpack还支持模块化，我们可以将一个复杂的系统拆分成各个模块。增加代码的封装性和重用性。在模块中我们只需要将要共享的变量或者函数导出，并在需要的地方导入。

2.3 webpack的打包过程

从入口文件开始，分析整个应用的依赖树
将每个依赖模块包装起来，放到一个数组中等待调用
实现模块加载的方法，并把它放到模块执行的环境中，确保模块间可以互相调用
把执行入口文件的逻辑放在一个函数表达式中，并立即执行这个函数

3.怎么配置webpack

参考 webpack中文网

webpack的核心模块：

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

3.1 安装

全局安装webpack
npm install webpack webpack-cli –g

3.2 webpack配置

在 webpack 4 中，可以无须任何配置使用，然而这些通用的配置可能不适合我们的项目，我们就可以在 webpack.config.js文件中定制个性配置。

webpack.config.js位置如下：

3.3 entry

entry用来配置哪些模块作为入口，也就是说从哪个文件开始打包。

webpack.config.js单文件入口：

    module.exports = {
     entry: './path/to/my/entry/file.js'  //入口文件路径
    };

webpack.config.js多文件入口：

const path = require('path');
    
module.exports = {
     entry: {
         index:'./src/index.js',
         hello:'./src/hello.js'
    }
},`

3.4 output

output用来指定你打包好的文件要放在哪，以及如何命名这些文件。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',  //输出文件名
    path: path.resolve(__dirname, 'dist')  //存放文件夹路径
  },
}

这时你在终端输入webpack开始打包

看到如下操作就说明你打包成功

这时dist中的main.js就是你打包好的文件

3.5 loader

loader能够将非js文件转化成js文件（webpack只能打包js文件），然后利用webpack的打包功能对其进行打包。
loader有两个重要属性

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

举例：css-loader

1.首先安装css-loader和style-loader

npm install --save-dev css-loader style-loader

2.在index.js中引入index.css(随你怎么写样式)

3.配置webpack.config.js文件

const path = require('path');
    
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js', 
    path: path.resolve(__dirname, 'dist') 
  },
  module: {
    rules: [
    { 
        test: /\.css$/,    //这里使用正则来匹配css文件
        use:['style-loader','css-loader', ]  
    }
    ]
 },
}

3.6 plugins

plugins目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

使用plugins也很简单，分为三步：

安装使用的plugins
首先require对应模块
在plugins中new 模块（）

举例html-webpack-plugin：（作用是打包html文件）

首先还是先安装html-webpack-plugin
npm i html-webpack-plugin --save-dev

配置 webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//1.先引入对应模块
    
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js', 
    path: path.resolve(__dirname, 'dist') 
  },
  module: {
    rules: [
    { 
        test: /\.css$/,    //这里使用正则来匹配css文件
        use:['style-loader','css-loader', ]  
    }
    ]
 },
 plugins: [
     new HtmlWebpackPlugin({   //2.new HtmlWebpackPlugin()
       template: './index.html',  //html文件所在路径
       filename: './main.html'    //输出文件名
    })
 ]
}

4.如何使用webpack命令

1.最简单的就是在终端中输入webpack

2.可以在package.json文件中配置常用的命令
在scripts模块中配置了build命令，输入npm run build后webpack会按照webpack.config.js中的配置对文件进行打包。