webpack学习记录

本章内容：

1. webpack是什么
2. 为何要使用webpack
3. 怎么配置webpack
4. 如何使用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的打包过程

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

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也很简单，分为三步：

1. 安装使用的plugins
2. 首先require对应模块
3. 在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中的配置对文件进行打包。