webpack2 の設定

scssのcompileぐらいしか、使用していないけれど、webpack2の設定ファイルをメモとして残します。

ファイル構成

asset ├stylesheet ├app.js └commons.js dev ├fontello ├img ├js ├stylesheet └app.js node_modules package.json webpack.config.js

package.json

{ "name": "webpack-demo", "version": "1.0.0", "description": "dev", "main": "index.js", "scripts": { "start": "webpack --watch", "build": "webpack -p" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.1", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "jquery": "^3.2.1", "node-sass": "^4.5.2", "sass-loader": "^6.0.4", "style-loader": "^0.17.0", "url-loader": "^0.5.8", "webpack": "^2.2.0", "webpack-dev-server": "^2.4.5" }, "dependencies": { "lodash": "^4.17.4" } }

webpack.config.js

const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const extractCSS = new ExtractTextPlugin('stylesheet/[name].css'); const extractCommons = new webpack.optimize.CommonsChunkPlugin({ name: 'commons', filename: 'commons.js' }); const config = { context: path.resolve(__dirname, 'dev'), entry: { app: './app.js' }, output: { path: path.resolve(__dirname, 'asset'), publicPath: '/asset/', filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, loader: extractCSS.extract([ { loader: 'css-loader', options: { //minimize: true } }, 'sass-loader' ]) },{ test: /\.js$/, include: path.resolve(__dirname, 'dev'), use: [{ loader: 'babel-loader', options: { presets: [ ['es2015', { modules: false }] ] } }] }, { test: /\.(png|jpg|png|woff|woff2|eot|ttf|svg)$/, use: [{ loader: 'url-loader', options: { limit: 10000 } // Convert images < 10k to base64 strings }] } ] }, plugins: [ extractCSS, extractCommons, new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] } module.exports = config

app.js

//Stylesheetの読み込み import './stylesheet/app-master.scss';

app-master.scss

@charset "UTF-8"; // import @import "setting"; @import "mixin"; @import 'reset'; @import 'fontello'; @import 'frame';

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。


  1. KATOON.NET
  2. TRASH
  3. webpack2 の設定