webpack学习(2)

作者: FeRookie | 来源:发表于2017-07-27 16:26 被阅读0次

前面一章我们简单的介绍了一下webpack的四个核心概念,现在我们利用这篇文章详细的了解下。

1. 入口起点(Entry Points)

前面说过entry是规定webpack的入口文件。

  • 单个入口语法
    用法:entry: string|Array<string>**
//webpack.config.js
//简写
const config = {
  entry: './path/to/my/entry/file.js'
};

//原本的写法
const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};
module.exports = config;

当你向 entry 传入一个数组时会发生什么?向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就很有用。

  • 对象语法
    用法:entry: {[entryChunkName: string]: string|Array<string>} **
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。

  • 常见场景

分离 应用程序(app) 和 第三方库(vendor) 入口

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

多页面应用程序

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

2.输出(Output)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置

  • 用法
    在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:
    • filename 用于输出文件的文件名。
    • 目标输出目录 path 的绝对路径。
const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;
  • 多个入口起点
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘:./dist/app.js, ./dist/search.js
  • 高级进阶
output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

在编译时不知道最终输出文件的 publicPath 的情况下,publicPath 可以留空,并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath,你可以先忽略它,并且在入口起点设置 webpack_public_path

__webpack_public_path__ = myRuntimePublicPath

// 剩余的应用程序入口

3.Loader

loader是用于对源代码进行转换,可以使你在import或者require模块时预处理文件。loader可以将文件从不同语言转换为JavaScript,或者将内联图像转为DATA URL,或者可以在JavaScript模块中import样式文件。

  • 使用loader
    这里就主要介绍配置的方法来使用loader,如下:
  module: {
     rules: [
        {
          test: /\.css$/,
          use: [
            { loader: ['style-loader'](https://doc.webpack-china.org/loaders/style-loader) },
            {
              loader: ['css-loader'](https://doc.webpack-china.org/loaders/css-loader),
              options: {
                modules: true
            }
          }
        ]
      }
    ]
  }

4.插件

webpack 插件是一个具有 apply
属性的 JavaScript 对象。apply
属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。

function ConsoleLogOnBuildWebpackPlugin() {

};

ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('run', function(compiler, callback) {
    console.log("webpack 构建过程开始!!!");

    callback();
  });
};
  • 用法
    由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins属性传入 new实例。根据你的 webpack 用法,这里有多种方式使用插件。
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;

相关文章

  • webpack学习(2)

    前面一章我们简单的介绍了一下webpack的四个核心概念,现在我们利用这篇文章详细的了解下。 1. 入口起点(En...

  • webpack2学习

    webpack2学习 webpack2基本介绍 介绍 webpack和gulp一样是一个自动化的构建工具你不想做的...

  • 2017-07-03

    webpack更好配置 webpack进阶-知乎 webpack 学习 nodejs 学习

  • webpack

    webpack 学习笔记 webpack ? 1、模块化 2、自定义文件或npm install 3、静态文件模块...

  • webpack学习笔记(2)

    webpack的使用方式 自己手写配置 webpack配置 第三方脚手架 Vue-Cli Angular-Cli ...

  • webpack学习笔记(2)

    1、解析ES6和React JSX cnpm i @babel/core @babel/preset-env ba...

  • webpack - 项目优化

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

  • webpack实现原理

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

  • webpack - 项目优化2

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

  • Webpack学习笔记

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

网友评论

    本文标题:webpack学习(2)

    本文链接:https://www.haomeiwen.com/subject/dafakxtx.html