初探webpack

2019/02/21 15:00:00

什么是webpack？

官网的概念为：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。
看起来是不是比较难理解，实际上我们可以理解为，Webpack就是一个静态资源打包工具，可以把JS及其所依赖的css和图片(都认为是一个模块)打包为一个.js文件，让客户端浏览器只引入最终的js文件，从而实现减少HTTP请求的目的，优化访问速度！

环境

安装nodeJs

安装webpack

1.全局安装webpack命令(避免会提示你 webpack不是内部命令)

1	npm install webpack webpack-cli -g

2.在项目目录中下载webpack

1	npm install webpack

配置

webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。

通常，你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，webpack 会自动使用它。

开始使用

1.创建文件 src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>初探webpack</title>
</head>
<body>
  <h1>字体为红色</h1>
</body>
</html>

2.创建文件 src/index.css:

1
2
3

h1 {
  color: red;
}

3.创建文件 src/index.js:

1	require('./index.css'); // 需要打包的文件

4.创建文件 webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {

  // 指定要打包的文件，注意路径不能省略./
  entry: './src/index.js',

  // 指定打包完成后输出的文件
  output: {
    path: path.resolve(__dirname, './dist'),   // 打包目录
    publicPath: '',                            // 引入资源链接前缀，如设置为 'admin', 则js打包后的引入链接为 '<script type="text/javascript" src="admin/js/main.170867ca69c3117761c4.js"></script>'
    filename: 'js/[name].[hash].js'            // 打包生成文件名
  },

  // 声明模块的打包规则
  module: {
      rules: [
          { 
            test: /\.css$/,                   // 用于标识出应该被对应的 loader 进行转换的某个或某些文件。
            loader:'style-loader!css-loader'  // 表示进行转换时，应该使用哪个 loader，需要先用过npm安装
          },
          {
            test: /\.html$/,
            use: {
                loader: 'html-loader'
            }
          }
      ]
  },

  // 使用plugins
  plugins: [
    new HtmlWebpackPlugin({
      title: '生成html文件',
      filename: 'index.html',
      template: "src/index.html",
      inlineSource: '.(js|css)$'
    })
  ]

}

5.打包

webpack

运行后生成dist文件夹，可看到里面只有 index.html 和 main.js 两个文件, 原本 src/index.js 里面require的文件都打包到 main.js 里面了，可打开dist文件夹中的index.html文件就能看到样式。

核心概念

1.入口起点 [entry]
入口起点(entry point)指示 webpack 应该使用哪个模块，是打包开始的起点，可以通过在 webpack 配置中配置 entry 属性，来指定一个不同的入口起点（或者也可以指定多个入口起点）。

webpack.config.js:

1
2
3

module.exports = {
  entry: './src/index.js',
};

2.出口 [output]
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，主输出文件默认为 ./dist/main.js，其他生成文件的默认输出目录是 ./dist。

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '',
    filename: 'js/[name].[hash].js'
  },
};

3.loader
作为开箱即用的自带特性，webpack 自身只支持 JavaScript。而 loader 能够让 webpack 处理那些非 JavaScript 文件，并且先将它们转换为有效模块，然后添加到依赖图中，这样就可以提供给应用程序使用。
常用loaders 的功能介绍列表

webpack.config.js:

const path = require('path');

module.exports = {
  ...
  module: {
      rules: [
          { 
            test: /\.css$/,                   // 用于标识出应该被对应的 loader 进行转换的某个或某些文件。
            loader:'style-loader!css-loader'  // 表示进行转换时，应该使用哪个 loader，需要先用过npm安装
          },
          {
            test: /\.html$/,
            use: {
                loader: 'html-loader'
            }
          }
      ]
  },
};

4.插件 [plugins]
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
常用插件的功能介绍列表

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack');  // 用于访问内置插件

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

总结

通过上面的学习我们已经初步了解webpack的概念及配置信息，webpack.config.js这里是官方文档关于webpack的高级配置，我们可以从上面学习中如何配置其他功能!