webpackめっちゃ便利ですね(・ω・)
良いチュートリアルがあったので、実際にやってみて
メモしたものを簡単にまとめました。良ければ参考にしてください。
概要
scripts.jsにmodule1.jsとmodule2.jsをrequireし、
依存解決してscripts.min.jsに吐き出します。
ディレクトリ構成
※変更する場合、configも直してください。( jsフォルダをsrcとdestに分けたいですね。
scripts.js
require('./module1.js'); // あとで例としてjqueryを導入
require('./module2.js'); // あとで例としてlodashを導入
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>my webpack page</h1>
<script src="js/scripts.min.js" charset="utf-8"></script>
</body>
</html>
webpackを使えるようにする
npm init
npm install -S webpack
npm install -g webpack
webpackの設定ファイルを作成する
touch webpack.config.js
webpack.config.js
var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? 'inline-sourcemap' : null,
entry: './js/scripts.js',
output: {
path: __dirname + '/js',
filename: 'scripts.min.js'
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
ソースのビルド
- 開発用
開発時はこちらのコマンド
webpack
基本監視をかけたいアナタはこちらのコマンド
webpack --watch
- 本番用
minifyされたものがscripts.min.jsに吐き出されます
本番にデプロイする前はこちらのコマンドを使うと◎
NODE_ENV=production webpack
例1: jQueryを導入
npm install -S jquery
module1.js
var $ = require('jquery');
$('h1').html('jqueryなう');
例2: lodashを導入
npm install -S lodash
module2.js
var _ = require('lodash');
_.each([1, 2, 3], alert);
参考 special thx!
Webpack Tutorial - Replace Gulp/Grunt plugins with a single tool