webpack メモ3：babelの追加
お母ちゃん
2019.12.5
0
0
babelの追加
IE11で確認したらエラーが出ていたのでbabelを追加
|
1 |
npm i -D @babel/core @babel/preset-env babel-loader |
|
1 2 3 4 5 6 7 8 9 10 |
{ test: /\.js$/, exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, |
ちょっとここでIEエラーで苦労したのですが・・
swiper を読み込んでいる場合 exclude から、swiper を除外しないといけない・・
【JS】スライダーのSwiperをwebpackで利用する場合 – 株式会社MIRAI
webpack.config.js
あと前回まで devServerで機能していなかった sourceMap も ONにしました。
const enabledSourceMap = isProduction ? false : true;
やっとだいぶまともに動いて使いやすくなってきた気がする・・
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProduction = process.env.NODE_ENV === 'production'; const enabledSourceMap = isProduction ? false : true; module.exports = { mode: isProduction ? 'production':'development', output: { path: path.resolve(__dirname, 'public/path/js'), publicPath: '/path/js/', filename: 'common.js', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.scss/, use: [ isProduction ? MiniCssExtractPlugin.loader : 'style-loader', { loader: "css-loader", options: { url: false, sourceMap: enabledSourceMap, importLoaders: 2 } }, { loader: "postcss-loader", options: { sourceMap: enabledSourceMap, plugins: [ require("autoprefixer")({ grid: true, browsers: [ 'last 2 versions', 'ie >= 11', 'Android >= 4', 'iOS >= 8' ] }) ] } }, { loader: 'sass-loader', options: { sourceMap: enabledSourceMap, } } ] } ] }, devServer: { open: true, contentBase: path.join(__dirname, 'public'), watchContentBase: true, host: '192.168.X.XXX', disableHostCheck: true, port: 3000, }, plugins: [ new MiniCssExtractPlugin({ filename: '../path/styles.css', }), ], }; |
package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ "name": "package", "version": "1.0.0", "dependencies": { "node-sass": "^4.12.0", "uikit": "^3.2.1" }, "devDependencies": { "@babel/core": "^7.7.4", "@babel/preset-env": "^7.7.4", "autoprefixer": "^9.7.2", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", "mini-css-extract-plugin": "^0.8.0", "postcss-loader": "^3.0.0", "sass-loader": "^8.0.0", "style-loader": "^1.0.0", "swiper": "^5.2.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.9.0" }, "scripts": { "build": "NODE_ENV=production webpack", "dev": "NODE_ENV=development webpack", "start": "webpack-dev-server" }, "author": "", "license": "ISC", "description": "" } |
