I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by webpack shows the CSS isn't minified with cssnano (because I can still see whitespace characters). What am I doing wrong?
Some relevant configuration files:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
var postCompileScript = require('./postCompile');
module.exports = {
entry: './src/popup.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({})
],
minimize: true
}
}
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
resolve: {
alias: {
"react": "preact-compat",
"react-dom": "preact-compat"
},
extensions: ['.js', '.jsx']
}
};
postcss.config.js:
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
}
}
package.json
{
"name": "REDACTED",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"deploy": "node ftp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"ftp": "^0.3.10",
"post-compile-webpack-plugin": "^0.1.2",
"postcss-loader": "^3.0.0",
"prepend-file": "^1.3.1",
"style-loader": "^0.22.1",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"iframe-resizer": "^3.6.1",
"js-cookie": "^2.2.0",
"npm": "^6.4.0",
"preact": "^8.3.1",
"preact-compat": "^3.18.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-iframe-resizer-super": "^0.2.0"
}
}
Thanks in advance.
For any future readers: I solved my problem by just adding the cssnano plugin to the postcss-loader in the config. Thus the css rule is as follows (webpack.config.js):
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({}),
require('cssnano')({ preset: 'default' })
],
minimize: true
}
}
]
}
Related
I am developing a google chrome extension, today when I tried to run the google chrome extension, shows error like this in popup.js:
popup.js:21888 Uncaught TypeError: Cannot read properties of undefined (reading 'locals')
at Object../node_modules/element-ui/lib/theme-chalk/message.css (popup.js:21888:12)
at __webpack_require__ (popup.js:20:30)
at Module../src/js/popup/index.js (popup.js:38789:96)
at __webpack_require__ (popup.js:20:30)
at popup.js:84:18
at popup.js:87:10
the npm build was success, but failed in the runtime, I have no idea where is going wrong. this is my package.json:
{
"name": "cruise-radar",
"version": "0.0.1",
"description": "Browser extension to detect available RSS and RSSHub for current page",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -w --mode=development --progress --display-error-details --colors",
"build": "webpack --mode=development --progress --display-error-details --colors",
"release": "npm run build && zip -r release/radar.zip dist",
"format": "eslint \"**/*.js\" --fix && prettier \"**/*.{js,scss,less}\" --write",
"format:staged": "eslint \"**/*.js\" --fix && pretty-quick --staged --verbose --pattern \"**/*.{js,scss,less}\"",
"format:check": "eslint \"**/*.js\" && prettier-check \"**/*.{js,scss,less}\""
},
"repository": {
"type": "git",
"url": "git+https://github.com/jiangxiaoqiang/Cruise-Radar.git"
},
"keywords": [
"rsshub",
"rss"
],
"gitHooks": {
"pre-commit": "npm run format:staged"
},
"author": "DIYgod",
"license": "MIT",
"bugs": {
"url": "https://github.com/DIYgod/RSSHub-Radar/issues"
},
"homepage": "https://github.com/DIYgod/RSSHub-Radar#readme",
"devDependencies": {
"#babel/core": "7.12.3",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "7.12.1",
"#fingerprintjs/fingerprintjs": "3.1.2",
"autoprefixer": "9.8.6",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-plugin-component": "1.1.1",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "6.3.0",
"css-loader": "5.0.1",
"cssnano": "4.1.10",
"eslint": "7.13.0",
"eslint-config-prettier": "6.15.0",
"eslint-loader": "4.0.2",
"eslint-plugin-prettier": "3.1.4",
"file-loader": "6.2.0",
"js-wheel": "jiangxiaoqiang/js-wheel",
"less": "3.12.2",
"less-loader": "7.0.2",
"mini-css-extract-plugin": "1.3.0",
"postcss-loader": "3.0.0",
"prettier": "2.1.2",
"prettier-check": "2.0.0",
"pretty-quick": "3.1.0",
"sass-loader": "^10",
"svg-inline-loader": "0.8.2",
"template-string-optimize-loader": "3.0.0",
"url-loader": "4.1.1",
"vue": "2.6.12",
"vue-loader": "15.9.5",
"vue-template-compiler": "2.6.12",
"webpack": "4.44.2",
"webpack-cli": "3.3.12",
"yorkie": "2.0.0"
},
"dependencies": {
"#babel/runtime": "^7.17.2",
"clipboard": "2.0.6",
"core-js": "^3.21.1",
"element-ui": "2.14.0",
"md5.js": "^1.3.5",
"psl": "1.8.0",
"regenerator-runtime": "^0.13.9",
"route-recognizer": "0.3.4",
"rss-parser": "3.9.0",
"sass": "^1.44.0",
"vue-router": "3.4.9",
"yarn": "^1.22.17"
}
}
and this is the project webpack config:
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production',
bail: true,
devtool: false,
performance: {
maxEntrypointSize: 1000000,
},
entry: {
'popup': './src/js/popup/index.js',
'content': './src/js/content/index.js',
'background': './src/js/background/index.js',
'options': './src/js/options/index.js',
'sandbox': './src/js/sandbox/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/',
},
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.less'],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
include: path.resolve(__dirname, '../src/js'),
},
{
test: /\.js$/,
use: [
'template-string-optimize-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['#babel/preset-env'],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
},
],
],
}
}
]
},
{
test: /\.css$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
],
},
{
test: /\.less$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
'less-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
'sass-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
'limit': 40000
}
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.(ttf|woff)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new CopyPlugin({
patterns: [
{
from: 'src/assets',
to: '',
},
],
}),
new VueLoaderPlugin(),
new webpack.DefinePlugin({
VERSION: JSON.stringify(require('./src/assets/manifest.json').version)
}),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
what should I do to fix this problem? I tried to debbuging with breakpoint, but it did not going into the breakpoint when I using the extension, only show this error when I open the popup page(did not trigger the error again). If I tried to reproduce the error, I have to close the popup window and reopen it.
For hours search and tried to debugging, finally from the error message I guess that my mac book pro system language was en, but the element-ui did not support the en right now(the other computer language set zh works fine). I just did not know how to make the element-ui support the en in the google chrome extension popup page, I only using the Message from element ui like this in the popup.js:
import { Message } from 'element-ui';
and there is no Vue or other framework that could let me set the multi language support, there is only one js file in the context, what should I do to fix it?
I'm trying to build my Vue app on Node 13 and Webpack 4. For this I'm using this webpack.config.js
const { VueLoaderPlugin } = require("vue-loader");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
mode: 'development',
entry: {
main: "./src/main.js",
},
output: {
filename: "[name].[contenthash:12].js",
path: path.resolve(__dirname, "dist"),
chunkFilename: "[name].[contenthash:12].js",
},
module: {
rules: [
{
test : /\.(jsx?)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.(eot|ttf|woff|woff2|txt)(\?\S*)?$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
},
},
{
test: /\.(png|jpe?g|gif|webm|mp4|svg|ico)$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
outputPath: "assets/img",
esModule: false,
},
},
{
test: /\.(css)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
],
},
{
test: /\.(s(c|a)ss)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true,
importLoaders: 2,
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
"sass-loader",
{
loader: "sass-loader",
options: {
sourceMap: true,
implementation: require("sass"),
sassOptions: {
//fiber: require("fibers"),
prependData: `#import "app/javascript/manager/styles/main.scss"`,
//indentedSyntax: true
}
}
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[contenthash:8].css",
chunkFilename: "[name].[contenthash:8].css",
}),
new htmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
favicon: path.resolve(__dirname, "public", "favicon.ico"),
}),
],
resolve: {
alias: {
vue$: "vue/dist/vue.runtime.esm.js",
},
extensions: ["*", ".js", ".jsx", ".css", ".scss", ".vue"],
modules: [
"node_modules",
]
},
optimization: {
moduleIds: "hashed",
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
priority: -10,
chunks: "all",
},
},
},
},
devServer: {
historyApiFallback: true,
},
}
And this is my package.json
{
"name": "my-app-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/compiler-sfc": "^3.1.4",
"axios": "^0.21.1",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"core-js": "^3.6.5",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-router": "^3.5.2",
"vuetify": "^2.5.6",
"webpack-war-plugin": "^1.0.0-beta.3"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.2.0",
"sass": "1.32.13",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue-cli-plugin-vuetify": "~2.4.1",
"vue-loader": "^16.3.0",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.5.6",
"vuetify-loader": "^1.7.0",
"webpack": "^4.42.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
After struggling with the sass-loader I reduced the list of errors, but this one is significant and I haven't found a way to remove it:
ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--5-3!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
╷
1 │ #charset "UTF-8";
│ ^
╵
No sass-node, just sass was used. Uncommenting indentedSyntax: true will simply drop another error saying that semicolons are not allowed. Upgrading versions will return other set of error. Fibers is out of scope (it just improves processing of certain async calls to my knowledge). Upgrading to Webpack5 adds a pletora of new problems as the json structure is quite different.
I'm totally stack at this point. There must be something else to work on the sass loader nut I'm not an expert on webpack so it's taking simply too long. Any help would be greatly appreciated at this point. I cannot believe none is having the same issue. I see many related answers but everyone seem to be doing fine just adding indentation. Thanks!
I have developed a VueJS project. After I run the command
npm run build
a dist folder containing a build.js file, build.js.map and images, get generated.
But there is no index.html file in /dist.
My project structure looks like this
And my webpack.config.js looks like this
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Here is my package.json
"name": "jitsi-demo",
"description": "This is demo Jitsi Project",
"version": "1.0.0",
"author": "---",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"ajax": "0.0.4",
"jquery": "^3.5.0",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"html-webpack-plugin": "^4.2.0",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
I have tried using CopyWebpackPlugin and HtmlWebpackPlugin after using I get another error
^
ReferenceError: HtmlWebpackPlugin is not defined```
I'm setting up Jest for a webpack 2 project that isn't a React project.
I have installed jest-cli and babel-jest.
I'm getting this error:
.babel-rc:
{
"presets": [
"es2015"
],
"plugins": [
"syntax-jsx",
["transform-react-jsx", {"pragma": "html"}]
]
}
webpack.config.js:
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
devtool: 'source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
},
{
test: /\.styl$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'stylus-loader'
],
}
]
},
resolve: {
extensions: ['.js'],
modules: [
path.join(__dirname, 'src'),
'node_modules'
]
},
plugins: [
new ExtractTextPlugin({ filename: 'style.css', allChunks: true }),
],
jest: {
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
'\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js'
}
},
'env': {
'test': {
'plugins': ['transform-es2015-modules-commonjs']
}
}
}
package.json:
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "node server.js",
"test": "jest"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-0"
]
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-jest": "^19.0.0",
"babel-loader": "^6.3.2",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"css-loader": "^0.26.2",
"eslint": "^3.17.0",
"extract-text-webpack-plugin": "^2.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^19.0.2",
"jest-cli": "^19.0.2",
"regenerator-runtime": "^0.10.3",
"style-loader": "^0.13.2",
"stylus": "^0.54.5",
"stylus-loader": "^2.5.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"#cycle/dom": "^16.0.0",
"#cycle/run": "^3.0.0",
"babel-plugin-transform-react-jsx": "^6.23.0",
"bulma": "^0.3.2",
"css-modules-require-hook": "^4.0.5",
"eslint-plugin-jsx": "^0.0.2",
"snabbdom-jsx": "^0.3.1",
"xstream": "^10.3.0"
}
}
How can I get rid of the error?
Using arrow function without parameters still requires the parentheses.
The following code should work:
test('adds a and b together', () => {
expect(sum(1, 2)).toBe(3)
})
Note that the only case the parentheses are not needed is when there is only one parameter.
You can read documentation here.
I've just noticed that when I inspect any element in Chrome or Firefox dev tools the attributes assigned to that element always point to same line, which is either the end of the source file (when I open static index.html) or, if I run my app by webpack-dev-server, beginning of the file.
My webpack.config.js:
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'source-map',
module: {
loaders: [
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
loader: ['css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
})
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
loader: ['css-loader?sourceMap']
})
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
},
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./app/static/js/app.js'
],
output: {
filename: './app/dist/js/bundle.js',
//publicPath: './', // adding back will break webpack-dev-server!
},
watch: false,
plugins: [
new ExtractTextPlugin('./app/dist/css/main.css'),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
host: 'localhost',
//hot: true, // adding back will break webpack-dev-server!
port: 8080,
inline: true,
stats: '_errors-only',
contentBase: './'
}
};
My package.json:
{
"name": "new-admin",
"version": "1.0.0",
"description": "",
"main": "0.44132ff81411f73136a6.hot-update.js",
"dependencies": {
"autoprefixer": "^6.5.3",
"bootstrap-loader": "^2.0.0-beta.15",
"bootstrap": "^3.3.7",
"css-loader": "^0.26.0",
"file-loader": "^0.9.0",
"jquery": "^3.1.1",
"postcss": "^5.2.5",
"postcss-loader": "^1.1.1",
"sass-loader": "^4.0.2",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.16.2",
"webpack-uglify-js-plugin": "^1.1.9"
},
"devDependencies": {
"postcss-load-config": "^1.0.0",
"postcss-loader": "^1.1.1"
},
"scripts": {},
"author": "",
"license": "ISC"
}