webpack 3.0構成説明

webpack
私たちはwebpackを使って主に以下の機能を完成します:1.jsコードをコンパイル2.jsコード3を抽出、分割する.sassコード4をコンパイルする.圧縮jsコード5.圧縮cssコード6.ページ7を生成する.デバッグ8.その他
Webpack調製
Webapck配合で最も主要なのは4つの部分です:*entry*output*loaders*plugins
Entry
entryは、構築全体の開始点を定義します.

webpackConfig.entry = {
  normalize: [ paths.client('normalize') ],
  vendor : config.compiler_vendor,
  app: paths.client('main.js')
}

ここでは3つの開始点を定義し、keyはこのchunkの名前で、後ろにこのchunkの開始点があります.
Output
outputはwebpackのパッケージ結果を出力する方法を定義しています

webpackConfig.output = {
  filename: `[name].[hash].js`,
  chunkFilename: `[id].[name].[hash].js`,
  path: 'dist',
  publicPath: 'http://one.jushenghua.com/'
}

Filename:entrypointごとに1つの出力ファイルchunkFilename:コード分割後のファイル名publicPath:すべてのリソースのパブリッシュパスを指定する
loaders
loaderはコンパイラと考えられ、es 6をes 5にコンパイルし、babel-loaderを介してsassをcssにコンパイルし、sass-loaderのすべてのloaders調製によって定義される.

// webpack1
module.loaders = [
  // loaders
  {
    test: /\.coffee$/,
    loader: 'coffee'
  },
  {
    test: /\.css$/
    loaders: [
      'style',
      'css'
    ]
  }
]

// webpack 2+
module.rules = [
  // loaders
  {
    test: /\.coffee$/,
    loader: 'coffee-loader'
  },
  {
    test: /\.css$/,
    use: [
      {
        loader: 'style-loader'
      },
      {
        loader: 'css-loader'
      }
    ]
  }
]

plugins
pluginsはwebpackが他の機能を完成するメカニズムであり、例えばページを生成し、html-webpack-pluginを使用し、圧縮jsはUglifyJsPlugginを使用する.
コンパイルJS
コンパイルes 6

webpackConfig.module.rules = [{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
    plugins: ['transform-runtime'],
    presets: ['es2015', 'stage-0']
  }
}]

preset
a preset is a set of plugins used to support particular language features
jsxのコンパイル
react,flow presetを追加

webpackConfig.module.rules = [{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
    plugins: ['transform-runtime'],
    presets: ['es2015', 'react', 'stage-0', 'flow']
  }
}]

antdのダイナミックロードを増やす
import pluginを追加

webpackConfig.module.rules = [{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
    plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: true }]],
    presets: ['es2015', 'react', 'stage-0']
  }
}]

コンパイルriotes2015-riot presetを使用
コンパイルpreact
次のpluginを追加します.

['transform-react-jsx', { 'pragma': 'h' }]

JSコードの抽出
通常、entry pointに含まれるモジュールは、対応する出力ファイルにパッケージされます.しかし、異なるentry pointには同じモジュールが含まれている場合があります.同じモジュールを抽出すれば、出力サイズ全体を小さくすることができます.CommonsChunkPluginはこれを達成するためです.

webpackConfig.plugins.push(
  new webpack.optimize.CommonsChunkPlugin({
    names: ['normalize', 'vendor']
  })
)

コード分割
私たちが開発したのは1ページのアプリケーションで、デフォルトでは、各ページがappにパッケージされます.jsでは、ページを開くときに、すべてのページのコードをロードしてから表示する問題があります.そのため、必要なページをロードするためにコード分割が必要です.Webpack自体はコード分割機能を提供しています.webpack 1とwebpack 2+の実現は違います.*webpack 1はrequireを使用します.Ensure(),require(*)*webpack 2 import()を使用して、importはPromise*ensureを返してchunkに名前を付けることをサポートして、importはサポートしません

// webpack 1
require.ensure([], (require) => {
  next(null, [
    require('./Login').default(store),
    require('./dashboard').default(store),
    require('./NotFound').default
  ])
}, 'root')

// webpack 2
render () {
  return (
    <Router history={createHashHistory()}>
      <AsyncRoute path='/counter' getComponent={() => import('./Counter').then(module => module.default)} />
    Router>
  )
}

コンパイルSASS
コンパイルsassは比較的簡単で、babelと同様にsass-loaderを呼び出せばよい.sass loaderの役割はsassをcssにコンパイルすることですが、webpackはcssをパッケージ化し、いくつかの調製作業が必要です.

{
  loader: 'sass-loader',
  options: {
    sourceMap: false,
    includePaths: [paths.client('assets/style')]
  }
}

パッケージcss
cssをパッケージ化するには、いくつかのloader*style-loaderが必要です.