ExtractTextPluginでcssファイルを出力する
webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。
パッケージのインストール
extract-text-webpack-pluginのパッケージが必要なのでインストールします。
$ npm install --save-dev extract-text-webpack-pluginwebpack.config.jsの修正
webpack.config.jsを修正します。
pluginsと各styleのloaderにextract-text-webpack-pluginを適用させます。
vueのコンポーネントでスタイルを指定している場合はそのloaderに対しても適用させます。
vue-router webpackでページごとにファイルを分割するで扱ったように、出力するjsファイルを分割する場合は、ExtractTextPluginのallChunksの設定をtrueにします。
webpack.config.jsconst webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './resources/assets/js/app.js',
output: {
path: __dirname + '/public',
publicPath: '/',
filename: 'js/app.js',
chunkFilename: 'js/[name].chunk.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader',
less: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
less: ExtractTextPlugin.extract({
use: ['css-loader', 'postcss-loader', 'less-loader']
})
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.less$/,
loader: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
loader: ExtractTextPlugin.extract({
use: ['css-loader', 'postcss-loader', 'less-loader']
}),
exclude: /node_modules/
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
},
modules: [
path.resolve('./resources/assets'),
path.resolve('./node_modules')
]
},
devServer: {
contentBase: __dirname + '/public',
publicPath: '/',
noInfo: true,
historyApiFallback: true
},
plugins: [
new ExtractTextPlugin({
filename: 'css/app.css',
allChunks: true // jsファイルを分割する場合は必ずtrueにする
})
]
};