Coming Soon ...
Thanks for visiting!
Sorry, currently this page is not available in English yet.
It will be translated soon.
tips / javascript
ES6開発環境(webpack+Babel, SASS, IE11対応)
Last Update : October 02, 2019
※ Babel 7.4.0で @babel/polyfill
が非推奨となり、その修正とあわせて記事全体を加筆・修正いたしました。(2019/10/2)
ES6で開発を行うにあたりwebpackやBabelを使用した環境を、公式サイトやブログを参考にしながら整理しました。普段ボイラープレートとして使用しています。
対応するもの
- ES6をES5に変換
- jQueryなどを使用する場合はプロジェクトのJSファイルとは別にバンドル
- SASSを使用
- CSSファイルはJSファイルとは別に出力
- CSSのベンダープレフィックスを自動で付与
- 開発時はローカルサーバーを起動してホッとリロードさせる
環境・ツール
設定方法
/** package.json */
{
//...省略
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"autoprefixer": "^9.6.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"eslint": "^6.5.1",
"file-loader": "^4.0.0",
"gsap": "^2.1.3",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"postcss-cli": "^6.1.2",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
},
"dependencies": {
"core-js": "^3.2.1",
"jquery": "^3.4.1"
}
}
/** .babelrc */
{
presets: [
[
'@babel/preset-env',
{
targets: {
ie: 11,
esmodules: true
},
useBuiltIns: 'usage',
corejs: 3
}
]
],
}
非推奨となった @babel/polyfill
に代わる設定は、こちらのブログを参考にしました。
/** webpack.config.js */
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AutoPrefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const IS_DEV = (process.env.NODE_ENV === 'dev');
module.exports = env => {
return {
entry: {
common: './src/js/common.js',
index: './src/js/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'assets/js/[name].min.js'
},
devServer: {
historyApiFallback: true,
compress: true,
contentBase: './dist',
hot: true,
port: 8080
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false,
sourceMap: IS_DEV,
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
AutoPrefixer(
{
overrideBrowserslist: ['last 4 versions'],
grid: 'autoplace'
}
)
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: IS_DEV
}
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
IS_DEV: IS_DEV
}),
new MiniCssExtractPlugin({
filename: 'assets/css/style.css'
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}
}
mini-css-extract-pluginは、CSSファイルをJSファイルとは別に出力するためのプラグインです。
| コマンド |
| ---- | ---- |
| npm run watch
| ファイルの更新を監視して自動でコンパイル |
| npm run dev
| developmentモードでのビルド |
| npm run build
| productionモードでのビルド |
| npm run start
| ローカルサーバーhttp://localhost:8000を起動 |
参考
- 株式会社ICS 池田 泰延「最新版で学ぶwebpack 4入門 - Babel 7でES2019環境の構築(React, Vue, Three.js, jQueryのサンプル付き)」(参照2019-06-02)
- webpack 「SplitChunksPlugin」(参照2019-08-09)
- aloerina「Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法」(参照2019-10-01)