Webpack 2入門
3165 ワード
紹介する
WebpackはJavaScriptアプリケーションモジュールパッケージです.Webpackは、アプリケーション依存グラフを迅速に作成し、正しい順序でパッケージ化することで、ワークフローを簡素化します.生産環境のためにvendor/css/jsコードを分割し、リフレッシュホットロード(hot-reload)がないなど、あなたのコードに対してwebpackをカスタマイズすることができます.
Webpackは何ができるの?
インストール
ここではwebpack 2.4.1バージョンを使用しています.
#
npm install -g webpack
#
npm install --save-dev webpack
小さな例です
必要な依存ライブラリの作成とインストール
$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y
$ npm install --save-dev webpack
$ npm install --save-dev css-loader
$ npm install --save-dev style-loader
$ npm install --save-dev extract-text-webpack-plugin
$ npm install webpack-dev-server
入口(index.js)
import './style.css';
content = require("./content.js")
var element = document.createElement('message');
element.innerHTML = content;
document.body.appendChild(element);
カスタムモジュール(content.js)
module.exports = "It works from content.js!!!";
css (style.css)
body {
background: grey;
}
htmlページ(index.html)
webpack
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
}
};
bundle.js
$ webpack
Hash: 62f1078175b4dbbd7d46
Version: webpack 2.4.1
Time: 368ms
Asset Size Chunks Chunk Names
bundle.js 19.1 kB 0 [emitted] main
[0] ./content.js 48 bytes {0} [built]
[1] ./style.css 992 bytes {0} [built]
[2] ./index.js 171 bytes {0} [built]
[3] ./~/css-loader!./style.css 192 bytes {0} [built]
[4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
[5] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
[6] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
にbundleが することがわかります.jsファイル.jsとcssがすべて まれています.
ブラウザでindexに アクセスします.htmlファイルは を します.
$ webpack --watch
$ webpack-dev-server
これまで、jsとcssを するたびに でブラウザをリフレッシュして を る があったが、 にはwebpack-dev-serverは するたびに にブラウザをリフレッシュするように することができ、クールに こえるので、 してみよう. のコマンドを してwebpack-dev-serverを します.
$ webpack-dev-server --hot --inline
そしてjsやcssを し、 し、ページが にリフレッシュされるでしょう.