Почему я не использую мою конфигурацию webpack в Windows?
Мой конфиг веб-пакета может работать в MacOS, но в Windows он показывает ошибку.
webpack.config.js
var path = require("path");
var webpack = require("webpack");
var FileSystem = require("fs");
var argv = require('yargs').argv;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
main: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8090',path.resolve(__dirname, 'app','index.jsx')],
vendor:['react', 'redux', 'amazeui-react','react-redux' ,'react-router']
},
output: {
path: path.resolve(__dirname, 'dist','app'),
publicPath: '/dist/app/',
filename: 'bundle.[hash].js',
chunkFilename: '[id].[hash].chunk.js',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('dev')
}
}),
new webpack.DefinePlugin({
'process.env.db_env': JSON.stringify(argv['db_env'] ? argv['db_env'] + '' : 'dev'),
}),
function() {
this.plugin("done", function(statsData) {
var stats = statsData.toJson();
var bundlejs,maincss;
var mains = stats.assetsByChunkName.main;
console.log(mains);
for (var i = 0; i < mains.length; i++) {
if (/^(bundle).+(js)$/.test(mains[i])) {
bundlejs = mains[i]
}
if (/^(main).+(css)$/.test(mains[i])) {
maincss = mains[i]
}
}
if (!stats.errors.length) {
var htmlFileName = "index.html";
var html = FileSystem.readFileSync(path.join('./resources/temp', htmlFileName), "utf8");
var htmlOutput = html.replace('bundle.js', bundlejs).replace('main.css', maincss);
FileSystem.writeFileSync(path.join('./', htmlFileName), htmlOutput);
}
});
}
],
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!sass?outputStyle=expanded&sourceMap')
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
plugins: ['transform-runtime', 'add-module-exports', "transform-decorators-legacy"],
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=8192' }
]
},
externals: {
BMap:'BMap',
BMapLib:'BMapLib'
},
resolve: {
root:path.resolve(__dirname),
modulesDirectories: [
'app',
'node_modules'
],
extensions: ['', '.js', '.jsx','.scss','.css']
},
resolveLoader: {
root:path.resolve(__dirname,"node_modules"),
},
devServer: {
port: 8090,
hot: true,
host:"0.0.0.0",
historyApiFallback: {
index: 'index.html'
}
}
};
Моя структура каталогов такая:
+src
+app
+node_modules
+webpack.config.js
и все работает нормально на MacOS, но когда я запускаю его на Windows, я получаю сообщение об ошибке:
Module not found: Error: Cannot resolve module 'css' in somefile.
Файл просто так:
const style = require('./BuildingDetailContainer.scss');
и я уверен, что я установил css-loader sass-loader style-loader
Это мое package.json， Я подозреваю, что это вызвано этим файлом. Возможно, потому что я не добавляю свой загрузчик в зависимости.
{
"name": "souban-website",
"version": "1.0.0",
"description": "souban website",
"author": "souban team",
"license": "UNLICENSED",
"private": true,
"engines": {
"node": ">=5.0.0",
"npm": "^3.0.0"
},
"scripts": {
"clean": "rm -rf dist",
"start": "npm run webpack-dev",
"deploy": "npm run test && npm run clean && npm run compile",
"webpack": "rm -rf dist && NODE_ENV=production webpack --display-error-details --colors --progress -p --config webpack.prod.config.js",
"webpack-dev": "webpack-dev-server --progress --colors --hot --inline",
"webpack-release": "rm -rf dist && NODE_ENV=production webpack --display-error-details --colors --progress -p --config webpack.rele.config.js --db_env production",
"webpack-dev-release": "rm -rf dist && NODE_ENV=production webpack --display-error-details --colors --progress -p --config webpack.rele.config.js --db_env dev"
},
"dependencies": {
"amazeui-react": "^1.0.1",
"babel-runtime": "^6.6.1",
"color": "^0.11.3",
"colormin": "^1.1.2",
"css-loader": "^0.24.0",
"extract-text-webpack-plugin": "^1.0.1",
"moment": "^2.12.0",
"node-sass": "^3.8.0",
"postcss-colormin": "^2.2.0",
"react": "^0.14.7",
"react-count-to": "^0.4.0",
"react-dom": "^0.14.6",
"react-motion": "^0.4.2",
"react-redux": "^4.0.6",
"react-router": "^2.4.0",
"redux": "^3.0.6",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.12.12"
},
"devDependencies": {
"autobind-decorator": "^1.3.3",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-plugin-add-module-exports": "^0.1.4",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"isomorphic-fetch": "^2.2.1",
"jsx-loader": "^0.13.2",
"lodash": "^4.3.0",
"node-sass": "^3.6.0",
"radium": "^0.16.6",
"react-addons-css-transition-group": "^0.14.6",
"react-cookie": "^0.4.3",
"react-dom": "^0.14.5",
"react-hot-loader": "^1.3.0",
"react-modal": "^0.6.1",
"react-motion": "^0.4.1",
"redux-logger": "^2.3.1",
"redux-persist": "^1.5.5",
"redux-persist-crosstab": "^1.0.1",
"redux-thunk": "^1.0.3",
"sass-loader": "^3.2.0",
"scroll-behavior": "^0.3.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0",
"yargs": "^4.7.1"
}
}
1 ответ
Я работаю на Windows, и это было кошмаром, чтобы все работало на нем нормально, на Mac все работало нормально, но не на Windows, поэтому, если это неправильно только в Windows и Sass, возможно, вам придется вручную добавить путь к загрузчику sass.,
Трюк на Windows здесь:
- Показать скрытые файлы и папки.
- Проверьте папку в 'user/appData', путь должен быть: C:\Users\user\AppData\Roaming\npm
- Добавьте переменную окружения в Windows: NODE_PATH и укажите ее на nodeModules C:\Users\user\AppData\Roaming\npm\nodeModules
- Запустите npm install -g
- Закройте и снова откройте терминал.
Я использую загрузчик sass 3.0, и в моем webpack.config это выглядит так:
const path = require("path");
const srcPath = path.join(__dirname, 'src');
const sassLoaders = [
"css-loader",
"autoprefixer-loader?browsers=last 2 version",
"sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"),
];
У меня есть в моем package.json для загрузки:
"autoprefixer-loader": "3.1.0"
"sass-loader": "^3.0.0",
"style-loader": "0.12.4"
Мое решение использует path.sep, это необходимо в Windows, насколько я перерасчет:
resolve: {
extensions: ["", ".js", ".scss"],
modulesDirectories: ["src", "node_modules"],
root: [__dirname + path.sep + 'scripts'],
}
В качестве заголовка, для загрузчиков, которые я использую вот так, и я заметил, что в ваших модулях нет загрузчиков sass:
{test: /\.scss$/, loaders: ["style", "css", "sass"]},
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},