Webpack-ES 6、AMD、CommonJSのサポートをテスト

1検証webpack仕様サポートwebpackサポートES6,CommonJS,AMD仕様vendorフォルダを作成します.minus.js、multi.jsおよびsum.jsは、それぞれCommonJS、AMDおよびES6仕様で作成されます.

// minus.js
module.exports = function(a, b) {
  return a - b
}

// multi.js
define(function(require, factory) {
  'use strict'
  return function(a, b) {
    return a * b
  }
})

// sum.js
export default function(a, b) {
  return a + b
}

以上の3つのapp.jsファイルをjsファイルに導入

/**
 * webpack   ES6、CommonJs   AMD  
 */

// ES6
import sum from './vendor/sum'
console.log('sum(1, 2) = ', sum(1, 2))

// CommonJs
var minus = require('./vendor/minus')
console.log('minus(1, 2) = ', minus(1, 2))

// AMD
require(['./vendor/multi'], function(multi) {
  console.log('multi(1, 2) = ', multi(1, 2))
})

2.プロファイル上書きの作成entry/outputwebpack.config.jsYeswebpackデフォルトのプロファイル名は、ルートディレクトリの下に作成されます.

const path = require('path')

module.exports = {
  entry: {
    app: './app.js' //  
  },
  output: {
    publicPath: __dirname + '/dist/', // js   CDN  
    path: path.resolve(__dirname, 'dist'), //  
    filename: 'bundle.js' //   js  
  }
}

path.resolve()メソッドは、1つのパスまたはパスフラグメントのシーケンスを絶対パスとして解析します.__dirname:現在のモジュールのフォルダ名.console.logを使って出力すれば分かります

const path = require('path')

console.log('__dirname: ', __dirname)
console.log('path.resolve: ', path.resolve(__dirname, 'dist'))

module.exports = {
  entry: {
    app: './app.js' //  
  },
  output: {
    publicPath: __dirname + '/dist/', // js   CDN  
    path: path.resolve(__dirname, 'dist'), //  
    filename: 'bundle.js' //   js  
  }
}

実行npm run buildパッケージングjsファイルdistフォルダが生成され、パッケージされた2つのファイルが生成されます.
これはAMDの導入方式に関係し、app.jsにAMDの書き方を注釈すると、bundle.jsファイルが1つしかパッケージ化されません.
実際にコードを書くときは、ES6およびCommonJSの仕様で書く
あなたがAMDを注釈した後に、distの中で多くのファイルを梱包し終わって、これは梱包する時、先にdistファイルを削除していないためで、更に梱包して、私達は1つのプラグインを使って私達に実現するように手伝う必要があって、GitHubリンク:clean-webpack-plugin①カードの取り付け

npm install clean-webpack-plugin --save-dev

②修正webpackプロファイル

const path = require('path')

const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: {
    app: './app.js' //  
  },
  output: {
    publicPath: __dirname + '/dist/', // js   CDN  
    path: path.resolve(__dirname, 'dist'), //  
    filename: 'bundle.js' //   js  
  },
  plugins: [
    new CleanWebpackPlugin() //  ，  webpack output.path ，  webpack  。
  ]
}

注意!!!インストールされたclean-webpack-pluginが3.0バージョンの場合、構成は次のように変更されます.

// common js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

その後npm run buildを実行すればよい
パッケージされたjsファイルは私たちの構成に従ってdistディレクトリの下に置いて、htmlファイルを作成して、パッケージされたjsファイルを参照して、F 12を開けて効果を見ることができます