Какие моменты кода отвечают за ошибки, что нужно исправить:
Первая ошибка при запуске npm run production:
Переменная среды NODE_ENV-production webpack не определена
Вторая ошибка происходит в следующем: браузер не видит картинку, подключённую через свойство background , но подключенную напрямую через img видит. Как я поняла, там почему-то не тот путь указывается, то есть когда через img - он ищет изображение в нужной папке img, а когда через background , то ищет почему-то в папке css , но что-то я не соображаю как это изменить...
И, собственно, package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "webpack module sample",
"main": "src/js/app.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"production": "set NODE_ENV-production webpack"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"autoprefix": "^1.0.1",
"autoprefixer": "^9.6.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"cross-env": "^5.2.0",
"css-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"imagemin-webpack-plugin": "^2.4.2",
"img-loader": "^3.0.1",
"node-sass": "^4.12.0",
"postcss-cli": "^6.1.3",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-url-loader": "^3.0.0",
"uglifyjs-webpack-plugin": "^2.1.3",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var isProduction = (process.env.NODE_ENV === 'production');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
app: [
'./js/app.js',
'./scss/style.scss'
],
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
},
// devServer configuration
devServer: {
contentBase: './app'
},
devtool: (isProduction) ? '' : 'inline-source-map',
module: {
rules: [
//scss
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader:'css-loader',
options: { sourceMap: true}
},
{
loader:'postcss-loader',
options: { sourceMap: true}
},
{
loader:'sass-loader',
options: { sourceMap: true}
},
],
fallback: 'style-loader'
})
},
{
test: /\.(png|gif|jpe?g)$/,
loaders: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
'img-loader',
]
},
],
},
plugins: [
new ExtractTextPlugin(
'./css/[name].css'
),
new CleanWebpackPlugin (),
new CopyWebpackPlugin (
[
{ from: './img', to: 'img'}
],
{
ignore: [
{glob:'svg/*'},
]
}
),
],
}
if (isProduction) {
module.exports.plugins.push (
new UglifyJSPlugin( {
sourceMap: true
}),
);
module.exports.plugins.push (
new ImageminPlugin({
test: /\.(png|jpe?g|gif|svg)$/
}),
);
module.exports.plugins.push (
new webpack.LoaderOptionsPlugin({
minimize: true
}),
);
}
ну и ещё есть postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
В общем вот, я точно уже знаю, что исправлять.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Я использую xsl-translations в своем проекте для создания таблиц и у меня есть несколько вопросов об эффективностиНапример: лучше ли использовать...
Обнаружил любопытную проблемку, которую не могу решить (или потрачу слишком много времени), ввиду чего обращаюсь за советом
Как сделать, чтобы заголовки были на одном уровне друг под другом ? Я понимаю,что причина в том,что разный размер картинокНо если я делаю одинаковый...