Last active
October 15, 2017 06:43
-
-
Save k-maru/12c3e9df95050711e0051d13cbffb24e to your computer and use it in GitHub Desktop.
WebPack で jQuery 3 / Bootstrap 4 / FontAwesome
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "webpack-jquery-bootstrap-fontawesome", | |
"version": "0.0.1", | |
"private": true, | |
"devDependencies": { | |
"autoprefixer": "^7.1.5", | |
"bootstrap": "4.0.0-beta", | |
"css-loader": "^0.28.7", | |
"expose-loader": "^0.7.3", | |
"extract-text-webpack-plugin": "^3.0.1", | |
"file-loader": "^1.1.5", | |
"font-awesome": "^4.7.0", | |
"jquery": "^3.2.1", | |
"node-sass": "^4.5.3", | |
"popper.js": "^1.12.5", | |
"postcss-loader": "^2.0.6", | |
"precss": "^2.0.0", | |
"sass-loader": "^6.0.6", | |
"style-loader": "^0.19.0", | |
"webpack": "^3.6.0" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require("path"); | |
const webpack = require("webpack"); | |
const ExtractTextPlugin = require("extract-text-webpack-plugin"); | |
const vendorScript = { | |
entry: ["jquery", "popper.js", "bootstrap"], | |
output: { | |
filename: "vendor.js", | |
path: path.join(__dirname, "dist/scripts") | |
}, | |
module: { | |
rules: [{ | |
test: require.resolve("jquery"), | |
use: [{ | |
loader: "expose-loader", // global に jQuery / $ を公開 | |
options: "jQuery" | |
}, { | |
loader: "expose-loader", | |
options: "$" | |
}] | |
}] | |
}, | |
plugins: [ | |
// bootstrap のコードから jQuery が直接見えるように | |
// http://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript | |
new webpack.ProvidePlugin({ | |
$: "jquery", | |
jQuery: "jquery", | |
"window.jQuery": "jquery", | |
Popper: ["popper.js", "default"] | |
}) | |
] | |
}; | |
const bootstrapDir = path.join(__dirname, "node_modules/bootstrap"); | |
const fontawesomeDir = path.join(__dirname, "node_modules/font-awesome"); | |
const vendorStyle = { | |
entry: [ | |
path.join(bootstrapDir, "scss/bootstrap.scss"), | |
path.join(fontawesomeDir, "css/font-awesome.css") | |
], | |
output: { | |
path: path.join(__dirname, "dist/styles"), | |
filename: "vendor.css" | |
}, | |
module: { | |
rules: [{ | |
test: /\.scss$/, // http://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-precompiled-sass | |
use: ExtractTextPlugin.extract({ | |
fallback: "style-loader", | |
use: [ | |
"css-loader", | |
{ | |
loader: "postcss-loader", | |
options: { | |
plugins: function () { | |
return [ | |
require("precss"), | |
require("autoprefixer") | |
]; | |
} | |
} | |
}, | |
"sass-loader" | |
] | |
}) | |
}, | |
{ | |
test: /\.css$/, | |
loader: ExtractTextPlugin.extract("css-loader") | |
}, | |
{ | |
test: /\.(eot|svg|ttf|woff|woff2|otf)$/, | |
loader: "file-loader?name=../fonts/[name].[ext]" // パスは output 指定からの相対 | |
}] | |
}, | |
plugins: [ | |
new ExtractTextPlugin("../styles/vendor.css") // パスは output 指定からの相対 | |
] | |
}; | |
module.exports = [vendorScript, vendorStyle]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment