カテゴリー別アーカイブ: webpack

webpack 2 で postcss を使う

前回の記事で webpack 2 を利用した SPA の開発環境の構築を記載しましたが, webpack 2 で postcss を導入してみたいと思います.

1. Install postcss

npm install --save-dev css-loader postcss-loader postcss-easy-import extract-text-webpack-plugin

2. Create webpack.config.js

const webpack           = require('webpack');
const ExtrackTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./src/main.js', './src/main.css'],
  output: { path: `${__dirname}/public`, filename: 'app.js' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtrackTextPlugin.extract({
          use: [
            'css-loader',
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('postcss-easy-import')({ glob: true })
        ]
      }
    }),
    new ExtrackTextPlugin('app.css')
  ],
  devtool: 'source-map',
  devServer: {
    contentBase: `${__dirname}/public`,
    port: 8080,
    inline: true,
    historyApiFallback: true
  }
};

赤字で表示している記述が, 1.x からの大きな変更点です. 1.x では, 以下のように記述していました (していたそうです …)

// ...
entry : {
  js: './src/main.js',
  css: './src/main.css'
},
//

webpack 2 で 1.x の記述をしてしまうと, 以下のようなエラーが発生してしまいます.

ERROR in chunk css [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js

3. src/main.css

@charset "UTF-8";

@import "./styles/base.css";
@import "./components/**/*.css";

npm でインストールした postcss-easy-import プラグインで Sass のような, CSS のインポートが可能になります.

4. src/styles/base.css

:root {
    --base-color: #ff1493;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family: Helvetica, Arial, sans-serif;
    color: var(--base-color);
}

こちらも同様に, Sass のような CSS 変数の利用が可能になります.

以上で, webpack 2 を利用したCSS のビルド環境も構築できました.
あとは,

$ npm run build

を実行すると, public/app.css が生成されます. また, JavaScript ファイルと同様, 変更して保存すると, ブラウザが自動でリロードされます.

参考

webpack 2 で SPA の開発環境構築

Build development environment for SPA using webpack 2

React を利用した SPA (Single Page Application) のための開発環境を, webpack 2 で構築していきます.

1. Install Node.js / npm

nodebrew を使うなどしてインストールします.

2. Create package.json

$ npm init -y

3. Install React, Babel and webpack

$ npm install --save react  react-dom
$ npm install --save-dev babel-core babel-loader babel-plugin-transform-class-properties babel-preset-es2015 babel-preset-react webpack webpack-dev-server

4. Create .babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-class-properties"]
}

5. Create webpack.config.js

module.exports = {
  entry: { js: './src/main.js' },
  output: { path: `${__dirname}/public`, filename: 'app.js' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      }
    ]
  },
  devtool: 'source-map',
  devServer: {
    contentBase: `${__dirname}/public`,
    port: 8080,
    inline: true,
    historyApiFallback: true
  }
};

赤字で表示しているキーが, webpack 2 で変更されました (1.x では, loaders と loader だったそうです …)

1 つ注意点として, output の path と devServer の contentBase のパスは絶対パスで記述する必要があります. 相対パスで記述してしまうと, 警告やエラー (Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
– configuration.output.path: The provided value “public” is not an absolute path!) が発生してしまいます.

それぞれの設定の詳細は他のドキュメントに任すこととして, とりあえずこれで開発環境構築のための webpack の記述ができました.

6. src/main.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello SPA</h1>, document.getElementById('app'));

7. public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
     <title>Hello SPA</title>
     <link rel="stylesheet" href="/app.css" type="text/css" media="all" />
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="/app.js"></script>
</body>
</html>

8. npm scripts

ビルドと開発サーバーの起動を簡単にできるように, package.json に npm scripts を定義します.

  //...
  "scripts": {
    "build": "webpack",
    "start:dev": "webpack-dev-server"
  },
  // ...

以上で, 最低限の開発環境の構築ができました.

$ npm run build

を実行すると, public/app.js が生成されます.

$ npm run start:dev

を実行すると, 開発サーバーが起動し, http://localhost:8080/ にアクセスするとページが表示されます.
また, src/main.js を変更して保存すると, ブラウザが自動でリロードされて, コンテンツが書き換わります (gulp の livereload) .