Skip to content

Instantly share code, notes, and snippets.

@logue

logue/pakage.json

Created October 9, 2018 23:58
Show Gist options
  • Save logue/61c2dfd4cb3e97a0585376c9e95e8761 to your computer and use it in GitHub Desktop.
Save logue/61c2dfd4cb3e97a0585376c9e95e8761 to your computer and use it in GitHub Desktop.
Download ZIP
Webpack4でJSとCSSを圧縮する時の設定。多分余計なのがある。
Raw
pakage.json
{
"scripts": {
"watch": "webpack --mode development --watch --color --progress",
"dev": "webpack --mode development",
"prod": "webpack --mode production --env.production",
"start": "webpack-dev-server --color --mode development"
},
"main": "webpack.config.js",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@types/source-map": "^0.5.7",
"autoprefixer": "^9.1.3",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.0",
"cssnano": "^4.1.3",
"expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"install": "^0.12.1",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.3",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^2.1.6",
"precss": "^3.1.2",
"resolve-url-loader": "^2.3.0",
"sass-loader": "^7.1.0",
"smoothscroll-polyfill": "^0.4.3",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.6"
},
"private": true
}
Raw
webpack.config.js
/*!
* Webpack.config.js
*
* @author Logue <[email protected]>
* @license MIT
*/
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = env => {
const NODE_ENV = (env && env.production) ? 'production' : 'development';
return [{
mode: NODE_ENV,
// サーバー
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
publicPath: '/',
inline: true,
overlay: true,
contentBase: path.join(__dirname, 'dist'),
host: '0.0.0.0',
port: 3000,
disableHostCheck: true
},
stats: {
colors: true,
},
/* ----------------
JS用モジュール
----------------- */
// ソース
context: path.resolve(__dirname, './src/js'),
entry: {
app: path.resolve(__dirname, './src/js/app.js') // 全体のスクリプト
},
// developmentモードのときにソースマップを出力する
devtool: NODE_ENV === 'development' ? 'source-map' : 'none',
// 出力先
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name].js'
},
module: {
rules: [{
// 拡張子 .js の場合
test: /\.js$/,
rules: [{
// Babel を利用する
loader: 'babel-loader',
// Babel のオプションを指定する
options: {
presets: [
// プリセットを指定することで、ES2018 を ES5 に変換
'@babel/preset-env',
]
}
}]
}]
},
// パッケージに含めないライブラリ
externals: {
jquery: 'jQuery'
},
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"],
//}),
// デバッグ
new webpack.EnvironmentPlugin({
NODE_ENV: NODE_ENV,
DEBUG: NODE_ENV === 'development'
}),
new webpack.HotModuleReplacementPlugin()
],
optimization: {
// developmentモードでビルドした場合
// minimizer: [] となるため、consoleは残されたファイルが出力される
// puroductionモードでビルドした場合
// minimizer: [ new UglifyJSPlugin({... となるため、consoleは削除したファイルが出力される
minimizer: NODE_ENV === 'development' ? [
// 頻繁に使用されるコードを整理
new webpack.optimize.OccurrenceOrderPlugin(false)
] : [
// 重複処理を削除
//new webpack.DedupePlugin(),
// 頻繁に使用されるコードを整理
new webpack.optimize.OccurrenceOrderPlugin(true),
// スクリプトを圧縮
new UglifyJSPlugin({
cache: true,
parallel: true,
uglifyOptions: {
warning: "verbose",
ecma: 6,
beautify: true,
comments: false,
mangle: true,
toplevel: true,
keep_classnames: false,
keep_fnames: false,
compress: {
unsafe_comps: true,
properties: true,
keep_fargs: false,
pure_getters: true,
collapse_vars: true,
unsafe: true,
warnings: false, // good for prod apps so users can't peek behind curtain
sequences: true,
dead_code: true, // big one--strip code that will never execute
drop_debugger: true,
comparisons: true,
conditionals: true,
evaluate: true,
booleans: true,
loops: true,
unused: true,
hoist_funs: true,
if_return: true,
join_vars: true,
drop_console: true // strips console statements
},
mangleProperties: {
ignore_quoted: true
}
}
})
],
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
resolve: {
extensions: ['.js']
},
watch: NODE_ENV === 'development'
}, {
/* ----------------
CSS用モジュール
----------------- */
context: path.resolve(__dirname, './src/scss'),
mode: NODE_ENV,
devtool: NODE_ENV === 'development' ? 'source-map' : 'none',
stats: {
colors: true,
},
entry: {
app: path.resolve(__dirname, './src/scss/app.scss')
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'css/[name].css'
},
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'style-loader', 'css-loader', 'postcss-loader']
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
// CSSをバンドルするための機能
{
loader: "css-loader",
options: {
// オプションでCSS内のurl()メソッドの取り込みを禁止する
url: false,
// CSSの空白文字を削除する
minimize: NODE_ENV === 'development',
// ソースマップを有効にする
sourceMap: NODE_ENV === 'development' ? 2 : 0,
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader
importLoaders: 2
}
},
// PostCSSのための設定
{
loader: "postcss-loader",
options: {
sourceMap: NODE_ENV === 'development',
plugins: () => {
return [
require('precss'),
// Autoprefixerを有効化
// ベンダープレフィックスを自動付与する
require('autoprefixer')({
grid: true
})
];
}
}
},
//{
// loader: 'resolve-url-loader'
//},
// Sassをバンドルするための機能
{
loader: 'sass-loader',
options: {
url: false,
// ソースマップの利用有無
sourceMap: NODE_ENV === 'development',
includePaths: [path.resolve(__dirname, 'node_modules')]
}
}
]
})
}, {
test: /\.(eot|otf|ttf|woff2?|svg)(\?.+)?$/,
include: [
path.resolve(__dirname, 'node_modules')
],
use: {
loader: 'file-loader',
options: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist',
name: 'fonts/[name].[ext]'
}
}
}]
},
plugins: [
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('css/[name].css')
}
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
watch: NODE_ENV === 'development',
optimization: {
// 圧縮設定
minimizer: [
new UglifyJSPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCssAssetsPlugin({})
]
}
}]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment