webpack study

2018-04-13 本文已影响0人 Da_Hao

一、主要概念：
1、entry(入口)
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

entry: './src/index.js', // 1、单个入口
entry: {
    main: './src/index.js',
},                                 // 2、单个入口，是1的具体写法
entry: ['./src/index.js', './src/index2.js',], // 3、多个入口，输出为1个
entry: {
    test1: './src/index.js',
    test2: './src/index.js',
},                                 // 4、多个入口，输出为多个（扩展性写法）

一般情况下都是一个html对应一个入口(单页应用和多页应用)
2、output(输出)
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
----输出单个文件

output: {
    filename: 'bundle.js', // 输出文件名
    path: '/public' // 输出文件路径
}

----多个入口，输出使用[占位符[name]来根据入口的key来输出多个的文件

entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }

3、loader
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或require模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。有三种方式

[Configuration] (推荐): Specify them in your webpack.config.js file.(外联)
[Inline]: Specify them explicitly in each import statement.(内联)
[CLI]: Specify them within a shell command.

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg)$/,
        use: [
          {
             loader: 'url-loader',
             options: {
               limit: 1000
             }
          }
        ]
      },
      {
         test: /\.(js|jsx)$/,
         use: 'babel-loader'
      },
      {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },
]

import Styles from 'style-loader!css-loader?modules!./styles.css'; // 内联

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader' // CLI

loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何可能的操作。
loader 接收查询参数。用于对 loader 传递配置。
loader 也能够使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。

4、Plugins(插件)
插件是 wepback 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

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

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

注释：loaders和rules：loaders一般在webpack1中使用，rules一般在webpack2中使用，loaders以后会被废弃，所以还是直接用rules

先写到这吧，引用来自webpack官网https://webpack.js.org

webpack study

猜你喜欢

热点阅读