初対面のWebpack

ラベル(スペース区切り):フロントエンド
Webpackは、現在最も人気のあるフロントエンドリソースのモジュール化管理とパッケージングツールです.多くのばらばらなモジュールを依存とルールに従って、本番環境の導入に適したフロントエンドリソースにパッケージ化できます.また、必要に応じてロードされたモジュールをコードで区切って、実際に必要に応じて非同期でロードすることもできます.loaderの変換により、CommonJsモジュール、AMDモジュール、ES 6モジュール、CSS、ピクチャ、JSON、Coffeescript、LESSなど、任意の形式のリソースをモジュールと見なすことができる.
1 webpackのHello World
1.1 webpackをインストールし、プロジェクトディレクトリを初期化する

#      webpack
[ahcj@localhost ~]$ npm install -g webpack

#     
[ahcj@localhost ~]$ webpack -v
3.5.4

#       
[ahcj@localhost ~]$ webpack -h

1.2プロジェクトディレクトリの新規作成と初期化

#       
[ahcj@localhost test]$ mkdir learn-webpack
[ahcj@localhost test]$ cd learn-webpack

#        
[ahcj@localhost test]$ npm init

1.3ファイルとディレクトリの作成

#    app   public    
# app           ，public           
[ahcj@localhost learn-webpack]$ mkdir app public
#    index.html   main.js greet.js 
[ahcj@localhost learn-webpack]$ touch public/index.html app/greet.js app/main.js

public/index.html

app/main.js

const greeter = require('./greet.js');
document.querySelector("#root").appendChild(greeter());
alert()

app/greet.js

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

1.4パッケージ public/bundle.js

#   
[ahcj@localhost learn-webpack]$ webpack app/main.js  public/bundle.js
Hash: 0bd4f09244f0e8c60354
Version: webpack 3.5.4
Time: 79ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.47 kB       0  [emitted]  main
   [0] ./app/main.js 0 bytes {0} [built]

#      
[ahcj@localhost learn-webpack]$ firefox public/index.html

2プロファイルの
2.1 しいプロファイルwebpack.config.js

#        
[ahcj@localhost learn-webpack]$ touch webpack.config.js

#       
module.exports = {
  entry:  __dirname + "/app/main.js",//            
  output: {
    path: __dirname + "/public",//           
    filename: "bundle.js"//           
  }
}

:「_dirname」はnodeです.jsのグローバル で、 の スクリプトが するディレクトリを します.
2.2 npmプロファイルpackageを する.json

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack" //       ，JSON       ，      
  },
  "author": "",
  "license": "ISC"
}

2.3

[ahcj@localhost learn-webpack]$ npm start

> [email protected] start /home/ahcj/test/learn-webpack
> webpack

Hash: fb1e5f5198028e964873
Version: webpack 3.5.4
Time: 85ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.79 kB       0  [emitted]  main
   [0] ./app/main.js 102 bytes {0} [built]
   [1] ./app/greet.js 142 bytes {0} [built]

3ローカルサーバの
3.1 serverモジュールのインストール

[ahcj@localhost learn-webpack]$ npm install --save-dev webpack-dev-server

3.2 webpackを する.config.js

module.exports = {
  entry:  __dirname + "/app/main.js",//            
  output: {
    path: __dirname + "/public",//           
    filename: "bundle.js"//           
  },
  devServer: {
    contentBase: "./public",//                
    port:8080, //      ，    ，   ”8080“
    historyApiFallback: true,//   
    inline: true//    
  },
}

3.3 packageを する.json、serveコマンドの

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "serve": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-dev-server": "^2.7.1"
  }
}

3.4コマンドを し、ブラウザを に き、ファイルの を する

[ahcj@localhost learn-webpack]$ npm run serve

> [email protected] serve /home/ahcj/test/learn-webpack
> webpack-dev-server --open

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 6a71bf1e9ff28e2b26fb
Version: webpack 3.5.4
Time: 752ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  325 kB       0  [emitted]  [big]  main
  [35] multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js 40 bytes {0} [built]
  .......  .......
  [88] ./app/greet.js 142 bytes {0} [built]
    + 74 hidden modules
webpack: Compiled successfully.

4 Source Mapを (デバッグを に)
Source Mapは、コンパイルされたファイルとソースファイルを け、chromeがソースファイルにエラーを できるようにします.
Webpackを します.config.js

module.exports = {
  devtool: 'source-map', //                     source map
  entry:  __dirname + "/app/main.js",//            
  output: {
    path: __dirname + "/public",//           
    filename: "bundle.js"//           
  },
  devServer: {
    contentBase: "./public",//                
    port:8080, //      ，    ，   ”8080“
    historyApiFallback: true,//   
    inline: true//    
  },
}

[ 1:Webpackに し、これを れば ][1][ 2:webpack 2.2 ドキュメント][2]:www.jianshu.com/p/42e11515c10f [2]: ww.css88.com/doc/webpack2/concepts/entry-points/