Skip to content

Instantly share code, notes, and snippets.

@shuntksh

shuntksh/file0.js

Last active Mar 31, 2017
Embed
What would you like to do?
WebpackってCSS周りのLoaderがいっぱいあって分かりにくいので整理してみる ref: http://qiita.com/shuntksh/items/bb5cbea40a343e2e791a
{
test: /\.css$/,
loader: "style-loader!css-loader?modules&importLoaders=1&camelCase!postcss-loader",
},
# ローダの処理を無理やりシェル風に書いてみた
$ cat file.css | postcss-loader | css-loader --modules --importLoaders=1 | style-loader > bundle.js
/* main.css */
.myInput { margin: 10px; }
// Bundle前のJS
import CSS from "./main.css"
// 生成されたBundled JSの抜粋
var styles = listToStyles(list);
addStylesToDom(styles, options);
return function update(newList) {
var mayRemove = [];
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
for(var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for(var j = 0; j < domStyle.parts.length; j++)
domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
}
// 生成されたBundled JSファイル。デフォルトではGlobal Scopeとの衝突を避けるため、
// それぞれのクラス名がランダムな名前に変更されている。
exports.locals = {
"myInput": "_1LSFDF7AGSjr4tqAAn21qj",
"myInput": "_1LSFDF7AGSjr4tqAAn21qj"
};
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
npm i -D extract-text-webpack-plugin
npm i -D extract-text-webpack-plugin
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var config = {
entry: { main: "./src/main.js" },
output: {
path: "./build/",
filename: "[name].[chunkhash].js",
sourceMapFilename: "[name].[chunkhash].map",
},
plugins: [
// 1) Extract Pluginを読み込む
new ExtractTextPlugin("[name].[chunkhash].css"),
// 2) あわせてHtmlWebpackPluginを使うとHTML上にCSSへのリンクを書き出してくれる
// Add => <link href="<name.chunkhash>.css" rel="stylesheet"></head>
new HtmlWebpackPlugin({
template: "./src/client/index.html",
inject: "body",
}),
]
module: {
loaders: [
// Extract css files
{
// 3)実際にExtractTextPluginでCSSを処理する
test: /\.css$/,
loader: ExtractTextPlugin.extract("css-loader")
},
]
},
}
module.exports = config;
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.