日常学习之webpack

今天尝试着写一下webpack，不知道写的时候会不会把自己绕进去。如果有错误的地方还请大家指正。谢谢阅读的朋友。

大纲：

认识webpack
webpack的安装
手动配置webpack
手动配置webpack内置服务
手动配置HTML模板
手动配置css
ES6语法转换
图片配置

一、认识webpack

1.1 定义：前端自动化构建工具，基于Node.js开发。
1.2 针对问题：解决引入静态资源的合并、打包、压缩、混淆等问题。
1.3 如果不使用自动化构建工具会有什么问题：
① 网页加载速度慢。
② 要处理很多包与包之间的依赖关系。

二、webpack的安装

2.1 安装方式：
① 全局安装：npm install webpack -g
② 安装到项目依赖中：在项目根目录下运行 npm install webpack --save-dev
注意：webpack4，需要同时安装webpack-cli。
2.2 创建项目目录：node-modules文件夹是安装webpack时生成的，不用手动添加。需手动添加的已经用红色线条标出

安装完成后，使用npx webpack 进行打包。然后会在项目目录dist文件下生成main.js压缩文件。

2.3 代码示例：

console.log('这次能行') 

打印结果：

三、手动配置webpack

3.1 新建配置文件：/src/webpack.config.js（注意：在这之前请先将刚才手动创建dist文件夹删掉。）
3.2 配置内容：

let path = require('path ')
module.exports = {
  mode: 'development', // production or development
  entry: './src/index.js', // 入口文件
  output: {
    filename:'main.js', // 打包之后的文件名称
    path: path.join(__dirname, 'dist') 
    }
}

3.3 目录结构:

3.4 代码示例：

console.log('这次也可以打出来') 

3.5 打印结果

4、手动配置webpack内置服务

此时页面启动的时候，还不能通过loaclhost启动。webpack有一个内置的通过express实现的开发服务。我们可以安装它，并且配置相关内容，就可以实现通过localhost来访问页面了。它的好处是，它不会真正的去打包，而是在内存中生成一个打包。
4.1 安装： npm install webpack-dev-server -D (注意：这个大写的D说明是开发时的依赖)
4.2 package.json配置：

4.3 webpack.config.js配置：

运行：npm run dev

5、手动配置html模板：

5.1 安装：npm install html-webpack-plugin -D

5.2 webpack.config.js配置：

6、手动配置css

6.1 安装loader
npm install css-loader style-loader less-loader
6.2 webpack.config.js配置：

module: {
    rules: [ // 规则 
      // loader执行顺序：默认从右向左，从下向上
      {
        test: /\.less$/,
        use:[
          {
            loader: 'style-loader',
            options:{
              insertAt: 'bottom'
            }
          },
          'css-loader',
          'less-loader'
        ]},
    ]
  }

新建index.css文件

body  {
  background-color: pink;
}

index.js引入css

require('./index.css')

6.3 执行npm run dev

7、ES6语法转换：

webpack处理ES6语法时，需要将ES6语法（或者更高版本的）转换成ES5语法。这里要用到一JS的编译器-----Babel。
2.1 安装Babel
命令： npm install babel-loader @babel/core @babel/preset-env -D
解释一下：
① @babel/core 这个是babel的核心模块，当使用babel转换的时候，需要调用@babel/core，它可以调转换方法，从而实现换源代码。
② @babel/preset-env，这个是babel的转换模块，它可以告诉babel怎么转换，把一些高级的语法转换成低级语法。
2.2 代码示例

{ // 这里是babel-loader的配置规则
         test: /\.js$/,
         use: [
           {
             loader: 'babel-loader',
             options:{
               preset: [
                 '@babel/preset-env'
               ]
             }
         },
     ]
}

2.3 执行命令 npx webpack
打包成功后，执行 npm run dev运行项目。

8、图片：

图片在页面中的引用方式有三种：
① 使用img标签引入。

② 在css文件中引入。

background: url('图片地址')

③ 在js中创建图片引入。

let image = new Image();
image.src = '图片地址';
document.body.appendChild(image);

3.1 命令
执行命令：npm install file-loader -D
打包命令：npx webpack
运行项目：npm run dev
3.2 代码示例：

 { // 这里是图片的规则
          test: /\.(png|jpg|gif)$/,
          // use: 'file-loader',
           use: [
             {
              loader: 'file-loader',
             },
             'url-loader'
           ]
        }

更新于2020.10.08.
前面一段时间，忙着处理一些私事没有更新文章，学习进度也落下不少，今天坐下来继续捋webpack，如果有理解不恰当的地方还请大家指出，非常感谢。