Webpackをゼロから学ぶ(その3)
グローバル変数のファイル間共有
jQueryなどのライブラリをJSファイル側で毎回読みこむのが面倒であるときに有効なのが、 webpack.common.js
に webpack
モジュールからプラグインを読み込ませる方法だ。
webpack.common.js
const webpack = require('webpack') module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }) ] }
このようにしておけば、グローバル変数として $
シンボルが使用できるようになる。
sass + babelの導入
yarn add -D sass sass-loader babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-pipeline-operator
webpack.config.js
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/entry.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.(png|jpg|jpeg|svg|gif)$/, use: [ { loader: 'file-loader', options: { publicPath: '[name].[ext]', outputPath: 'img/', name: './img' } } ] }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [ '@babel/plugin-transform-runtime', ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }] ] } } } ] }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html' }) ] }