Webpack4 + Babel を使用して IE11 での動作を確認する。
ローカルにインストールします（ サイズはさほど大きくなく、46MB 程度なので複数のローカル環境に入れてもあまりディスクの負担になりません）
webpackとwebpack-cliとwebpack-dev-serverをインストールする
cd YOUR-PROJECT-FOLDER
npm install webpack webpack-cli webpack-dev-server -D
npm init -y
なお、オプションの -D は --save-dev と同じです
https://docs.npmjs.com/misc/config
./src/index.js
import {hellowebpack} from './f';
hellowebpack();
./src/f.js
export function hellowebpack() {
alert('hellowebpack!!!');
}
npx webpack
./dist/main.js が以下のような内容で作成されます
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),alert("helloメソッドが実行された。")}]);
javascriptのコードが圧縮されています。
これは 「 mode: 'production' 」な本番仕様です。
開発環境では圧縮しない 「 mode: 'development' 」を使用することでコンパイル時間を圧倒的に短縮することができます。
（ ↓ やり方はこの後で）
webpack.config.js
watch: true を追加すると watch します
module.exports = {
........................
watch: true
};
./dist/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>webpack test</title>
<script src="./main.js"></script>
</head>
<body>
</body>
</html>
mode: 'development' の記述はここに行います。
module.exports = {
devtool: 'inline-source-map' ,
mode: 'development', // （development: 開発 production: 本番）
entry: './src/index.js',
output: {
path: `${__dirname}/dist`,
filename: 'main.js'
},
devServer: {
contentBase: 'dist',
open: true
}
};
npx webpack-dev-server
これでサーバが起動し、自動的に ./dist/index.html を読み込んで「hellowebpack！！！」アラートが表示されれば成功です。
webpack-dev-serverを起動しておくと、対象ファイルが更新された時に自動でリコンパイルがかかります。 それを確認してみます。
./src/f.js を以下のように変更して保存する
export function hellowebpack() {
alert('hellowebpack!!! 変更しました。');
}
ブラウザに切り替えて、自動的に更新されていることを確認します。
自動更新機能は便利ですね！
「control + c 」で webpack-dev-serverを終了してから webpack ビルドを行う。
npx webpack
./dist/ 以下の全てのファイルを本番WEBサーバへアップロードして表示させて確認します。
webpack ではデフォルトでは js しか読み込めません。 css を読み込むようにするには
style-loader css-loader をインストールする
npm i -D style-loader css-loader
webpack.config.js の設定項目の一番下に以下を追加します。
module: {
rules: [
{
test: /\.css/,
use: [
'style-loader',
{loader: 'css-loader', options: {url: false}},
],
},
]
}
● webpack で js 以外に scss (sass) も読み込めるようにする こちらが今一番WEB制作的には一番現実的でしょう。
npm i -D webpack webpack-cli sass-loader sass style-loader css-loader
webpack.config.js を次のようにします。
// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = "development";
// ソースマップの利用有無(productionのときはソースマップを利用しない)
const SOURCEMAP_FLAG = MODE === "development"; // true or false
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
// モード値を production に設定すると最適化された状態で、
// development に設定するとソースマップ有効でJSファイルが出力される
mode: MODE ,
module: {
rules: [
{
// 対象となるファイルの拡張子(scss)
test: /\.scss$/,
// Sassファイルの読み込みとコンパイル
use: ExtractTextPlugin.extract([
// CSSをバンドルするための機能
{
loader: 'css-loader',
options: {
// オプションでCSS内のurl()メソッドの取り込まない
url: false,
// ソースマップの利用有無
sourceMap: true,
// Sass+PostCSSの場合は2を指定
importLoaders: 2
},
},
// PostCSSのための設定
{
loader: 'postcss-loader',
options: {
// PostCSS側でもソースマップを有効にする
sourceMap: true,
// ベンダープレフィックスを自動付与する
plugins: () => [require('autoprefixer')]
},
},
// Sassをバンドルするための機能
{
loader: 'sass-loader',
options: {
// ソースマップの利用有無
sourceMap: SOURCEMAP_FLAG,
}
}
]),
},
],
},
plugins: [
new ExtractTextPlugin('style.css'),
],
// source-map方式でないと、CSSの元ソースが追跡できないため
devtool: "source-map"
};
引用元 : https://qiita.com/hiroseabook/items/383d54a87fd5ab4108bc
ES6で書いたJavaScriptは IE11 では使えないので babel をwebpackから呼び出してIE11でも使える状態でコンパイルします
./src/Myclass.js
export class Myclass {
constructor(id,userName) {
this.id = id;
this.userName = userName;
}
alertUserName() {
alert(this.userName);
}
}
./src/Myclass.js
import {hellowebpack} from './f';
import {Myclass} from './Myclass.js';
hellowebpack();
var m = new Myclass(1, 'DOWN TOWN');
m.alertUserName();
npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env
webpackと合わせると 70MB くらいになります
下記のように書き換えます。
module.exports = {
mode: 'production', // development or production
entry: './src/index.js',
output: {
path: `${__dirname}/dist`,
filename: 'main.js'
},
devServer: {
contentBase: 'dist',
open: true
} ,
module: {
rules: [{
test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
]
}
}]
}]
}
};
npx webpack
本番サーバへアップロードして IE11で確認します。