webpack メモ 4 : vue.js の追加とhttps化
お母ちゃん
2019.12.12
0
0
目次
vue.jsの追加
インストール
|
1 |
npm i vue vue-loader vue-template-compiler |
ところで いつの間にか save dev の オプションは不要になっていたのですね。
npm install時に「–save」オプションはいらない – Qiita
webpack.config.js に 設定追記
|
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 |
// 1. const追加 const VueLoaderPlugin = require("vue-loader/lib/plugin"); module.exports = { module: { // 2. rulesに追加 rules: [ { test: /\.vue$/, loader: 'vue-loader' }, ] }, // 3. resolve 追加 resolve: { extensions: ['.js', '.vue'], alias: { vue$: 'vue/dist/vue.esm.js', }, }, // 4. plugins に追加 plugins: [ new VueLoaderPlugin(), ], }; |
https化
https: trueを追加するだけ
|
1 2 3 |
devServer: { https: true }, |
変更後
webpack.config.js
|
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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const VueLoaderPlugin = require("vue-loader/lib/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/common/js'), publicPath: '/common/js/', filename: 'script.js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { 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, https: true }, resolve: { extensions: ['.js', '.vue'], alias: { vue$: 'vue/dist/vue.esm.js', }, }, plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: '../css/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 32 33 34 35 |
{ "name": "package", "version": "1.0.0", "dependencies": { "jquery": "^3.4.1", "node-sass": "^4.12.0", "uikit": "^3.2.1", "vue": "^2.6.10", "vue-loader": "^15.7.2", "vue-template-compiler": "^2.6.10" }, "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": "" } |
だいぶ使いやすくなってきた・・
モジュールや設定の記述もシンプルで済むしGulpより好きかもしれない。
vue.jsも今回使ってみよ！ってだけでイマイチ活用方法がわかっていない。
基本的にIE11非対応？
とりあえず開発環境でパーツのモジュール化位で試用している・・
