3. webpack

3.1. 认识webpack

3.1.1. 什么是webpack

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

3.1.2. 功能

  • 将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。

  • 对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

3.1.3. webpack和grunt/gulp的对比

  • grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。

  • webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

../_images/打包.png

3.2. webpack的安装

前提环境是需要node的，然后需要有npm的， 最后通过npm安装webpack

npm install webpack --save-dev

其中 –save-dev 是表示开发时依赖的。

3.3. webpack的起步

目录说明

dist

用于存放打包后的文件，也就是后续我们生产环境需要的文件夹，其他的生产环境不需要。

src

源码文件夹，用于存放我们的开发文件。

index.html

首页文件

package.json

通过npm init生成的文件，

../_images/webpack起步.png

通过如下命令可以完成打包

# npm初始化
npm init
# 安装webpack
npm install webpack --save-dev
# 进行打包操作
webpack bundle  --entry  ./src/main.js -o ./dist/bundle.js

Tip

详细的具体代码点击右上角的github进入这个仓库找到工程进行测试。

3.4. webpack的配置

上面就是手工打包的一种方式了， 但是每次都要敲个命令去执行显然不是很方便的， 需要写成脚本方式的，然后执行才是正确做法。

webpack提供一个机制，可以配置一个文件，然后直接执行webpack 即可完成构建。

3.4.1. webpack.config.js样例

1
2
3
4
5
6
7
8
9
const path = require('path');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    }
};

3.4.2. package.json 样例

这个文件可以先通过npm init进行初始化，然后修改为如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
  "name": "webpackconfig",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo ok ",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.3",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.13",
    "webpack": "^5.11.1"
  }
}

3.4.3. 构建

上面的2个文件都创建和修改完毕后， 我们执行`npm run build` 就会从package.json文件找到`build`对应的脚本`webpack`进行执行，webpack在执行的时候会读取`webpack.config.js`作为配置文件 进行构建。这样就构建起来非常方便了。

3.5. loader的使用

上面的构建我们webpack完成了js的文件构建打包，但是文件还有其他的css,html等，这些文件webpack本身是无法进行处理的，需要借助loader完成处理。

loader使用过程需要2个步骤。

  1. 通过npm安装需要使用的loader

  2. 在webpack.config.js中的modules关键字下进行配置

3.5.1. css文件处理

css的处理需要相关的css load 支持需要先安装对应的loader, 然后进行配置。

安装loader

进行配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path');
//const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"}
                ]
            }
        ]
    },
};

3.5.2. less文件处理

还是按照软件和对应的配置

npm install --save-dev less-loader less

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const path = require('path');

//const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    },
    module: {
        rules: [
            // {
            //
            //     test: /\.css$/,
            //     use: [
            //         {loader: "less-loader"},
            //         { loader:"style-loader" },
            //         { loader:"css-loader" }
            //     ]
            //
            // },
            {
                test: /\.less$/,
                use: [
                    {loader: "less-loader"},
                    { loader:"style-loader" },
                    { loader:"css-loader" }
                ]
            },
        ]
    },


};

3.6. webpack中配置Vue

安装loader

npm install --save-dev vue-loader vue-template-compiler

进行配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
}

3.7. plugin的使用

插件是完成额外的附属的一些功能，比如添加版权信息。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
//"html-webpack-plugin": "^3.2.0",
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [

      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  plugins:[
    new webpack.BannerPlugin({
      banner: `
      auth: zhaojiedi1992
      email: zhaojiedi1992@outlook.com
      protal: mit
      `
    }),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

3.8. 搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

安装包

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

配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
//"html-webpack-plugin": "^3.2.0",
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [

      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },

  plugins:[
    new webpack.BannerPlugin({
      banner: `
      auth: zhaojiedi1992
      email: zhaojiedi1992@outlook.com
      protal: mit
      `
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: "app"
    })
  ],
  devServer:{
    contentBase: path.join(__dirname, 'dist'),
    compress: false ,
    port: 9000
  }
}