当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

webpack-blocks

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者束敏学

操作系统跨平台

开源组织无

适用人群未知

软件概览

webpack-blocks

Functional building blocks for your webpack config: easier way to configure webpack and to shareconfiguration between projects.

Ready to use blocks to configure popular tools like Babel, PostCSS, Sass, TypeScript, etc.,as well as best practices like extracting CSS — all with just one line of configuration.

Note: This is the documentation of webpack-blocks v2, compatible with webpack 4. Check out thev1 branch if you need to be compatible withwebpack 3 or older.

"Finally, webpack config done right. (...) Webpack clearly wants to stay low-level. So it makestotal sense to outsource configuring it to well designed blocks instead of copy-paste."

Dan Abramov viatwitter (Co-author of Redux, CreateReact App and React Hot Loader)

Installation

npm install --save-dev webpack webpack-blocks
# or
yarn add --dev webpack webpack-blocks

Example

The following sample shows how to create a webpack config with Babel support, dev server andAutoprefixer.

const webpack = require('webpack')
const {
  createConfig,
  match,

  // Feature blocks
  babel,
  css,
  devServer,
  file,
  postcss,
  uglify,

  // Shorthand setters
  addPlugins,
  setEnv,
  entryPoint,
  env,
  setOutput,
  sourceMaps
} = require('webpack-blocks')
const autoprefixer = require('autoprefixer')
const path = require('path')

module.exports = createConfig([
  entryPoint('./src/main.js'),
  setOutput('./build/bundle.js'),
  babel(),
  match(['*.css', '!*node_modules*'], [
    css(),
    postcss({
      plugins: [
        autoprefixer({ browsers: ['last 2 versions'] })
      ]
    })
  ]),
  match(['*.gif', '*.jpg', '*.jpeg', '*.png', '*.webp'], [
    file()
  ]),
  setEnv({
    NODE_ENV: process.env.NODE_ENV
  }),
  env('development', [
    devServer(),
    devServer.proxy({
      '/api': { target: 'http://localhost:3000' }
    }),
    sourceMaps()
  ]),
  env('production', [
    uglify(),
    addPlugins([new webpack.LoaderOptionsPlugin({ minimize: true })])
  ])
])

See shorthand setters and helpers documentation.

All blocks, like babel or postcss are also available as their own small packages,webpack-blocks package wraps these blocks, shorthand setters and helpers as a single dependencyfor convenience.

More examples

CSS modules:

const { createConfig, match, css } = require('webpack-blocks')

// ...

module.exports = createConfig([
  // ...
  match(['*.css', '!*node_modules*'], [
    css.modules()
  ]
])

TypeScript:

const { createConfig } = require('webpack-blocks')
const typescript = require('@webpack-blocks/typescript')

// ...

module.exports = createConfig([
  // ...
  typescript()
])

Custom blocks

Need a custom block? A simple block looks like this:

module.exports = createConfig([
  // ...
  myCssLoader(['./styles'])
])

function myCssLoader() {
  return (context, { merge }) =>
    merge({
      module: {
        rules: [
          Object.assign(
            {
              test: /\.css$/,
              use: ['style-loader', 'my-css-loader']
            },
            context.match // carries `test`, `exclude` & `include` as set by `match()`
          )
        ]
      }
    })
}

If we use myCssLoader in match() then context.match will be populated with whatever we set inmatch(). Otherwise there is still the test: /\.css$/ fallback, so our block will work withoutmatch() as well.

Check out the sample app to see a webpack config in action or readhow to create your own blocks.

Available webpack blocks

Helpers

Helpers allow you to structure your config and define settings for particular environments (likeproduction or development) or file types.

group
env
match
when

Shorthand setters

Shorthand setters gives you easier access to common webpack settings, like plugins, entry points andsource maps.

addPlugins
customConfig
defineConstants
entryPoint
performance
resolve
setContext
setDevTool
setEnv
setOutput
sourceMaps

Third-party blocks

webpack-blocks-happypack — HappyPack
webpack-blocks-less — Less
webpack-blocks-purescript — PureScript
webpack-blocks-server-source-map —source map for server bundle
webpack-blocks-split-vendor — vendorbundle
webpack-blocks-ts — TypeScript using ts-loaderinstead of awesome-typescript-loader
webpack-blocks-vue — Vue

Missing something? Write and publish your own webpack blocks!

Design principles

Extensibility first
Uniformity for easy composition
Keep everything configurable
But provide sane defaults

FAQ

How to debug?

In case the webpack configuration does not work as expected you can debug it usingq-i:

const { print } = require('q-i')

module.exports = createConfig([
  // ...
])

print(module.exports)

How does env() work?

env('development', [ ... ]) checks the NODE_ENV environment variable and only applies itscontained webpack blocks if it matches the given string.

So make sure you set the NODE_ENV accordingly:

// your package.json
"scripts": {
  "build": "cross-env NODE_ENV=production webpack",
  "start": "cross-env NODE_ENV=development webpack-dev-server"
}

If there is no NODE_ENV set then it will treat NODE_ENV as if it was development. Usecross-env to make it work on all platforms.

What does defineConstants() do?

defineConstants() is a small convenience wrapper around webpack'sDefinePlugin. It is composableand automatically encodes the values. Use it to replace constants in your code by their values atbuild time.

So having a defineConstants({ 'process.env.FOO': 'foo' }) and adefineConstants({ 'process.env.BAR': 'bar' }) in your config means the resulting webpack configwill contain a singlenew webpack.DefinePlugin({ 'process.env.FOO': '"FOO"', 'process.env.BAR': '"BAR"' }), thusreplacing any occurrence of process.env.FOO and process.env.BAR with the given values.

You can also use setEnv method to defineprocess.env.* variables, it’s based onwebpack.EnvironmentPlugin:setEnv({ FOO: 'foo' }).

What does a block look like from the inside?

A webpack block is a function and requires no dependencies at all ( �� ), thus making it easy towrite your own blocks and share them with your team or the community.

Take the babel webpack block for instance:

/**
 * @param {object} [options]
 * @param {RegExp|Function|string}  [options.exclude]   Directories to exclude.
 * @return {Function}
 */
function babel(options = { cacheDirectory: true }) {
  return (context, util) =>
    util.addLoader(
      Object.assign(
        {
          // we use a `MIME type => RegExp` abstraction here in order to have consistent regexs
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [{ loader: 'babel-loader', options }]
        },
        context.match
      )
    )
}

Add a README and a package.json and you are ready to ship.

For more details see How to write a block.

I need some custom webpack config snippet!

No problem. If you don't want to write your own webpack block you can use customConfig():

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { addPlugins, customConfig } = require('@webpack-blocks/webpack')

// ...

module.exports = createConfig([
  // ...
  addPlugins([
    // Add a custom webpack plugin
    new HtmlWebpackPlugin({
      inject: true,
      template: './index.html'
    })
  ]),
  customConfig({
    // Add some custom webpack config snippet
    resolve: {
      extensions: ['.js', '.es6']
    }
  })
])

The object you pass to customConfig() will be merged into the webpack config usingwebpack-merge like any other webpack block's partialconfig.

How to compose blocks?

Got some projects with similar, yet not identical webpack configurations? Create a “preset”, afunction that returns a group of blocks so you can reuse it in multiple projects:

const { createConfig, env, group, babel, devServer } = require('webpack-blocks')

function myPreset(proxyConfig) {
  return group([babel(), env('development', [devServer(), devServer.proxy(proxyConfig)])])
}

module.exports = createConfig([
  myPreset({
    '/api': { target: 'http://localhost:3000' }
  })
  // add more blocks here
])

The key feature is the group() method which takes a set of blocks and returns a new block thatcombines all their functionality.

Like what you see?

Support webpack-blocks by giving feedback,contributing to this repository, publishing newwebpack blocks or just by �� starring the project!

Contributors

These awesome people have helpedwebpack-blocks by adding features, fixing bugs and refactoring code. You can become one of them!

License

MIT

使用案例

webpack - hmr热更新

文章首发于个人blog，欢迎关注~ webpack hmr webpack-dev-server 在使用 webpack-dev-server 的过程中，如果指定了 hot 配置的话(使用 inline mode 的前提下)， wds 会在内部更新 webpack 的相关配置，即将 HotModuleReplacementPlugin 加入到 webpack 的 plugins 当中。 HotMo
webpack简单配置及其用法二

一、编写可维护的webpack构建配置栗子：构建配置包设计构建配置抽离成npm包的意义通过性：业务开发者无需关注构建配置；统一团队构建脚本可维护性：构建配置合理的拆分；reademe，changelog文档质量：冒烟测试，单元测试，测试覆盖率；持续继承构建配置管理的可选方案 1）通过多个配置文件管理不同环境的构建，webpack --config参数进行控制使用的配置文件，如基础
Scratch-blocks build无法编译问题解决方法

官方issue：https://github.com/LLK/scratch-blocks/issues/1620 在使用scratch-blocks时，遇到build编译失败，百度查了下解决方案，发现没有一篇能解决我这个问题，查不到相关的解决方案，于是我就去github的issue寻找是否有人与我相同遇到这种情况，查看了几篇文章终于发现了能解决的方案，分享给大家，希望能帮助到遇到相同问题的后来者
webpack-4.0更新日志

webpack-4.0更新日志（翻译）前言纯手打翻译，也有小部分比较生硬的翻译，原谅那部分我也没太懂? 大改动环境不在支持Nodejs 4。源代码已经更新到一个较高的ecmascript版本。使用你必须在两种模式中选择一个（mode或者--mode）： production 或者 development production 会开放所有优化功能去创建一个最优化的包 developmen
webpack-4.0更新日志（翻译）

前言纯手打翻译，也有小部分比较生硬的翻译，原谅那部分我也没太懂? 大改动环境不在支持Nodejs 4。源代码已经更新到一个较高的ecmascript版本。使用你必须在两种模式中选择一个（mode或者--mode）： production 或者 development production 会开放所有优化功能去创建一个最优化的包 development 开放注释和提示，并开启eval de
重读webpack5

重读webpack5 webpack5发布于2020年的国庆节之后，主要特点有：用持久性缓存来提高构建性能、用更好的算法和默认值来改进长期缓存、用更好的 Tree Shaking 和代码生成来改善包大小… 基础补充关于harmony modules ES2015 modules 又叫做 harmony modules 关于副作用: webpack的 side effect副作用，是指在impor
webpack常规配置

webpack webpack配置中文https://www.webpackjs.com/concepts/ 以下为自己动手搭建开发项目(react)相关基础配置环境，非脚手架搭建环境基础配置 => 能保证项目正常跑起来，没什么大问题注：以下配置文件均放置在项目根目录下 1. webpack.config.js 主配置文件，未更改名默认为webpack.config.js文件，存放项目根目录
webpack4配置之——25：webpack引入eslint

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里 webpack 引入 eslint 首先安装webpack支持eslint三件套: yarn add eslint eslint-loader eslint-friendly-formatter -D yarn add eslint eslint-loader eslint-friendly-formatter -D 然后修改we

webpack-blocks

webpack-blocks

Table of contents

Installation

Example

More examples

Custom blocks

Available webpack blocks

Helpers

Shorthand setters

Third-party blocks

Design principles

FAQ

Like what you see?

Contributors

License

同类工具

相关阅读

相关文章

相关问答

相关文档