#javascript #webpack #webpack-plugin
#javascript #webpack #webpack-плагин
Вопрос:
Я новичок в webpack, и я пытался настроить рабочую среду. Но когда я попытался разделить файлы css и js, я столкнулся с этой проблемой.
Extract-text-webpack-plugin работает не так, как планировалось.
Моя структура каталогов выглядит следующим образом:
приложение -> css -> (dir1, dir2)
моя конфигурация webpack выглядит следующим образом
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const validator = require('webpack-validator');
const pkgJSON = require('./package.json');
const PATHS={
app:path.join(__dirname,'app'),
build:path.join(__dirname,'build'),
style1:path.join(__dirname,'app','css','dir1'),
style2:path.join(__dirname,'app','css','dir1'),
};
//Common Configurations start
const common = {
entry: {
app:PATHS.app,
style1:PATHS.style1,
style2:PATHS.style2,
},
output: {
path: PATHS.build,
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].js',
sourceMapFilename: '[file].map'
},
plugins: [
new HtmlWebpackPlugin({
title: 'WebpackDemo'
})
]
};
//Common Configurations end
//Config from libs/config.js
const extConfig = require('./libs/configs.js');
var config;
switch(process.env.npm_lifecycle_event){
case 'build':
config=merge(common,{});
break;
case 'dev':
config=merge(common,extConfig.devServer({host:process.env.HOST,port:process.env.PORT}),
extConfig.cssLoader([PATHS.style1,PATHS.style2]),{devtool:'eval-source-map'},
extConfig.setFreeVariable('process.env.NODE_ENV','development'),
extConfig.extractBundle({name:'vendor',entries:Object.keys(pkgJSON.dependencies)}));
break;
case 'prod':
config=merge(common,extConfig.devServer({host:process.env.HOST,port:process.env.PORT}),
extConfig.cssLoader([PATHS.style1,PATHS.style2]),{devtool:'source-map'},extConfig.minify(),
extConfig.setFreeVariable('process.env.NODE_ENV','production'),
extConfig.extractBundle({name:'vendor',entries:Object.keys(pkgJSON.dependencies)}));
break;
default:
config=merge(common,{});
break;
}
module.exports=validator(config);
моя внешняя конфигурация выглядит следующим образом
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
exports.devServer = function(options){
return {
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
host:options.host,
port:options.port
},
plugins:[
new webpack.HotModuleReplacementPlugin({
multiStep:true
})
]
}
};
exports.cssLoader = function(paths){
return{
module:{
loaders:[
{
test: /.css$/,
loader: ExtractTextPlugin.extract('css'),
include: paths
}
]
},
plugins:[
new ExtractTextPlugin('[name].[hash].css')
]
};
}
exports.minify = function(){
return {
plugins:[
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings : false,
drop_console: true
},
mangle: {
except: ['$'],
screw_ie8: true,
keep_fnames: true,
except: ['webpackJsonp']
},
beautify: false,
comments: false
})
]
};
}
exports.setFreeVariable = function(key,value){
const env={};
env[key]=JSON.stringify(value);
return{
plugins:[
new webpack.DefinePlugin(env)
]
};
}
exports.extractBundle = function(options){
const entry = {}
entry[options.name] = options.entries;
return{
entry:entry,
plugins:[
new webpack.optimize.CommonsChunkPlugin({
names: [options.name,'manifest']
})
]
};
}
Ошибка, которую я получаю, заключается в следующем
ОШИБКА в модуле multi style1 не найдена: Ошибка: не удается разрешить ‘file’ или ‘directory’ /Users/john-3139/Documents/working/wepack1/app/css/dir1 в /Users/john-3139/Documents/working/wepack1 @ multi style1
ОШИБКА в модуле multi style1 не найдена: Ошибка: не удается разрешить ‘file’ или ‘directory’ /Users/john-3139/Documents/working/wepack1/app/css/dir1 в /Users/john-3139/Documents/working/wepack1 @ multi style1
Я намереваюсь создать CSS-файлы каждого каталога в виде отдельного css-файла как style1.css, style2.css
Что я здесь делаю не так?
Комментарии:
1. Вы установили
css-loader
иstyle-loader
? . Попробуйте этоloader: ExtractTextPlugin.extract("style-loader", "css-loader")
в части загрузчиков2. Да, я установил их, и я не хочу, чтобы мой код был встроен в head, поэтому я удалил загрузчик стилей. Но я включил загрузчик css в extracttextplugin. Но ошибка все еще сохраняется.
3. Я предполагаю, что ошибка связана с некоторыми ссылками.
4. установленный шрифт, загрузчики изображений также?
5. да, я их тоже установил.