webpackを使ってjQueryとlodashが使える環境を構築する

8469 ワード
scss jQuery lodash Sass webpack Sass テキストリンク

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