webpack 入门指南-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

webpack是什么？

随着互联网技术的发展，越来越多的网站从网页形式进化到webapp形式，使用Html5,CSS3,ES6等新技术来开发丰富的功能，网页不再是单纯的浏览作用，还有更多的动态交互。webapp通常是一个单页面应用，每一个视图通过异步的方式加载，导致页面的初始化和加载过程中出现越来越多的资源和代码，给前端的管理和组织带来巨大的挑战。如何组织好这些碎片化的代码和资源，并且保证它们在浏览器端快速，优雅地加载和更新，就是前端工程化所面临的问题。

webpack是一个前端资源模块化管理和打包工具，它可以将许多松散的前端模块按照依赖和规则打包成符合生产环境部署的前端资源。任何形式的资源，如 CSS,JSON,ES6模块,CommomJS模块等，通过webpack的loader的转换，都可以视为模块加载进来。webpack的作用如下图所示：

目前存在的前端构建工具

Yeoman

Yeoman 是一个新兴的工具。它结合了 Yo、Grunt 和 Bower 等工具，组成了一个完整的工具集合，提供各种 Web 应用开发中所需的实用功能。Yeoman 的最大优势在于它整合了各种流行的实用工具，提供了一站式的解决方案，使得 Web 应用开发中的很多方面变得简单。

Gulp

是一种基于流的，代码优于配置的新一代构建工具。

FIS3

百度开源的一个前端开源构建工具，解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

使用webpack

安装

//安装webpack
npm install webpack -g

//安装webpack的开发工具

npm install webpack-dev-server

使用

首先我们创建一个静态页面 index.html和一个入口文件index.js

整个工程目录结构如下：

index.html

<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
	<title>webpack simple demos</title>
	<meta charset="utf-8">
</head>
<body>

	<script src="bundle.js"></script>

</body>
</html>

index.js

// 输出Hello World!
document.write("Hello Wrold");

随后将index.js打包到bundle.js

webpack index.js bundle.js

打开浏览器，看到Hello World!

配置文件

webpack在执行的时候，除了在命令行输入参数之外，更多的我们是通过指定的配置文件来执行。默认的情况下，会搜索当前目录webpack.config.js这个文件，这个文件就是一个node.js模块。整个webpack的配置文件选项如下：

var path = require('path');

module.exports = {

  entry: "./app/entry", // string | object | array
  // 这里是应用程序开始执行的入口和webpack开始打包的地方

  output: {
    // 这里是webpack如何输出结果
    path: path.resolve(__dirname, "dist"), // string
    //所有文件的输出的目标目录
    //必须是绝对路径，这是使用Node.js的绝对路径
    filename: "bundle.js", // string
    // 入口文件名称

    publicPath: "/assets/", // string
    // HTML页面相关资源输出目录，如CSS,图片资源等。

    library: "MyLibrary", // string,
    // 导出的库文件

    libraryTarget: "umd", // universal module definition
    // 导出的库文件的名称

    /* 高级设置 */
  },

  module: {
    // 根据模块配置

    rules: [
      // 模块的规则(配置加载器，解析选项等等)

      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // 这些是匹配条件，每个接受一个正则表达式或者字符串
        // test和include都有相同的作用, 两者都必须匹配
        // exclude不需匹配
        // 最佳实践:
        // - 只在test使用正则匹配座位文件匹配
        // - 在include和exclude中使用绝对路径的数组
        // - 避免使用exclude,多使用include

        issuer: { test, include, exclude },
        // 发布的条件 (文件导入的来源)

        enforce: "pre",
        enforce: "post",
        // 使用这些规则的标志，即使它们被覆盖（高级选项）

        loader: "babel-loader",
        //将被应用的加载器，它会根据上下文被使用。为了不引起歧义，-loader的后缀现在必须添加

        options: {
          presets: ["es2015"]
        },
        // 加载器的选项
      },

      {
        test: "\.html$",

        use: [
          // 应用多个加载器和选项
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },

      { oneOf: [ /* rules */ ] },
      // 只是使用其中一条嵌套规则

      { rules: [ /* rules */ ] },
      // 使用所有嵌套规则

      { resource: { and: [ /* conditions */ ] } },
      // 只有当所有条件都匹配的时候，才匹配

      { resource: { or: [ /* conditions */ ] } },
      { resource: [ /* conditions */ ] }
      // 当其中任何一条条件匹配的时候匹配(默认是数组)

      { resource: { not: /* condition */ } }
      // 如果条件不匹配时匹配
    ],
  },

  resolve: {
    //  解决模块请求的选项
    //  并不应用到加载器上

    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    // 寻找模块的目录

    extensions: [".js", ".json", ".jsx", ".css"],
    //使用的拓展名

    alias: {
      // 模块的别名

      "module": "new-module",
      // 别名 "module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"

      "only-module$": "new-module",
      //别名 "only-module" -> "new-module"但是不薄啊扩 "module/path/file" -> "new-module/path/file"

      "module": path.resolve(__dirname, "app/third/module.js"),
      // 别名 "module" -> "./app/third/module.js"，"module/file"会出错
      // 模块别名会根据当前相关的上下文引入
    },
  },

  performance: {
    hints: "warning", // 枚举烈性
    maxAssetSize: 200000, // 整数(比特位),
    maxEntrypointSize: 400000, // 整数(比特位)
    assetFilter: function(assetFilename) { 
      // Function predicate that provides asset filenames
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: "source-map", // 枚举类型
  //  为浏览器开发工具提供加强的调试元信息

  context: __dirname, // string (绝对路径)
  // webpack webpack的根目录
  // 入口和module.rules.loader选项
  // 解决相关目录

  target: "web", // 枚举
  // 构建之后运行的环境
  externals: ["react", /^@angular\//],
  // 不要捆版这些模块，但是在运行环境中加载它们

  stats: "errors-only",
  // 让你精准控制展示的批数据

  devServer: {
    proxy: { // 后台开发时的代理服务器
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // boolean | string | array, 静态文件的位置
    compress: true, // 允许gzip压缩
    historyApiFallback: true, // 当404的时候，回到index.html
    hot: true, // 热加载，取决于HotModuleReplacementPlugin
    https: false, // 签名，认证
    noInfo: true, // 在热加载，只有错误和警告信息
    // ...
  },

  plugins: [
    // ...
  ],
  // 其它插件


 
}

实际开发的时候，我们根据需要对这些配置进行删减就行。下面是一个上面例子的配置文件的例子：

/**
 * Created by Thomas.lin.
 */

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'index.js'), //入口文件是index.js
    output: {
        path: path.resolve(__dirname, './'), //输出到当前目录bundle.js
        filename: 'bundle.js'
    },

    resolve:{
        extensions:['.js','.json']
    },
};

输入：
webpack
生成bundle.js文件
有时我们需要指定配置文件，可以输入
webpack —config webpack.custom.config.js

网上有一篇文章，详细简述了webpack的使用，也可以参考一下：

http://blog.csdn.net/u011043843/article/details/49738617

转载于:https://my.oschina.net/u/2562868/blog/856983