Related
Here is the package.json
{
"name": "webpack-threejs",
"version": "1.0.1",
"description": "Keivan Sina personal website.",
"keywords": [
"three.js",
"webpack",
"glsl",
"glslify"
],
"author": {
"name": "Keivan Sina",
"url": "http://k1sina.com"
},
"license": "MIT",
"sideEffects": false,
"scripts": {
"build": "webpack --mode production --config config/prod.js",
"start": "webpack serve --config config/dev.js"
},
"dependencies": {
"#brunoimbrizi/controlkit": "^0.1.93",
"#fancyapps/fancybox": "^3.5.7",
"animate.css": "^4.1.0",
"browser-detect": "^0.2.28",
"domready": "^1.0.8",
"glsl-noise": "0.0.0",
"gsap": "^2.1.3",
"imagesloaded": "^4.1.4",
"isotope-layout": "^3.0.6",
"jquery-bridget": "^2.0.1",
"odometer": "^0.4.8",
"stats.js": "^0.17.0",
"swiper": "^6.1.1",
"three": "^0.98.0",
"wow.js": "^1.2.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.52",
"#babel/plugin-syntax-dynamic-import": "^7.0.0-rc.1",
"#babel/polyfill": "^7.0.0-beta.55",
"#babel/preset-env": "^7.0.0-beta.52",
"babel-loader": "^8.0.0-beta.4",
"bootstrap": "^4.4.0",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"glslify": "^6.2.1",
"glslify-import-loader": "^0.1.2",
"glslify-loader": "^1.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^5.5.0",
"imports-loader": "^0.8.0",
"jquery": "^3.4.1",
"mini-css-extract-plugin": "^2.7.2",
"node-sass": "^6.0.1",
"raw-loader": "^0.5.1",
"sass": "^1.58.1",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^4.1.3"
}
}
Here is the common webpack rules:
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const variables = require('./variables.js');
const __root = path.resolve(__dirname, '../');
module.exports = {
entry: {
index: ['#babel/polyfill', './src/scripts/index.js'],
// index: '/src/scripts/index.js'
},
output: {
path: path.resolve(__root, 'dist'),
filename: 'scripts/[name].[chunkhash].js',
chunkFilename: 'scripts/[name].[chunkhash].js',
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-syntax-dynamic-import'],
},
},
exclude: /node_modules/,
},
{
test: /\.(glsl|frag|vert)$/,
use: ['glslify-import-loader', 'raw-loader', 'glslify-loader'],
},
{
test: /three\/examples\/js/,
use: 'imports-loader?THREE=three',
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
interpolate: true,
},
},
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
output: 'images',
esModule: false
},
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader',
},
],
},
resolve: {
alias: {
'three-examples': path.join(__root, './node_modules/three/examples/js'),
},
},
plugins: [
new CleanWebpackPlugin(['dist'], { root: __root }),
new CopyWebpackPlugin([
{
from: path.resolve(__root, 'static'),
},
]),
new HtmlWebpackPlugin({
template: './src/index.html',
inject: true,
chunks: ['index'],
filename: 'index.html',
}),
new HtmlWebpackPlugin({
template: './src/cases.html',
inject: true,
chunks: ['index'],
filename: 'cases.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/iransalary.html',
inject: true,
chunks: ['index'],
filename: 'iransalary.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/safarmarket.html',
inject: true,
chunks: ['index'],
filename: 'safarmarket.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/rideradar.html',
inject: true,
chunks: ['index'],
filename: 'rideradar.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/logodesign.html',
inject: true,
chunks: ['index'],
filename: 'logodesign.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/artvan.html',
inject: true,
chunks: ['index'],
filename: 'artvan.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/orugso.html',
inject: true,
chunks: ['index'],
filename: 'orugso.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/navaaz.html',
inject: true,
chunks: ['index'],
filename: 'navaaz.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/iotanalytic.html',
inject: true,
chunks: ['index'],
filename: 'iotanalytic.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/smartdent.html',
inject: true,
chunks: ['index'],
filename: 'smartdent.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/ledgercover.html',
inject: true,
chunks: ['index'],
filename: 'ledgercover.html',
templateParameters: variables,
}),
new webpack.ProvidePlugin({
THREE: 'three',
}),
new MiniCssExtractPlugin({
filename: '[name].[contentHash].css',
}),
],
};
And here is the index.js
import ready from 'domready';
import App from './App';
import './agansy';
import './../sass/style.scss';
ready(() => {
window.app = new App();
window.app.init();
});
I have a Webpack project and it used to work before. I upgraded my dependencies and now the scss is not being compiled. I checked the compiled files and there is no sign of css code.
I als tried to replace
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
}
with
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
but still no luck.
{
test: /\.(scss|css)$/,
use: [
// "style-loader",
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: true,
},
},
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: true,
},
},
{ loader: "sass-loader", options: { sourceMap: true } },
],
},
then import the main scss file in the app.js or bootstrap file of your project.
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 am trying to make unit tests with jest and bootstrap-vue but got errors on Bootstrap-vue tags like :
[Vue warn]: Unknown custom element: b-navbar - did you register the
component correctly?...
[Vue warn]: Unknown custom element:
b-navbar-nav - did you register the component correctly? …
[Vue warn]: Unknown custom element: b-button - did you register the
component correctly? …
Please find below the source code that could help you to have an idea to solve my issue... ;-)
Thanks
//Package.json
{
"name": "theappname",
"version": "1.0.0",
"repository": {
"type": "git",
"url": ""
},
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --open",
"dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
"staging": "cross-env NODE_ENV=staging webpack",
"build": "cross-env NODE_ENV=production webpack",
"test": "jest",
"test:debug": "node --inspect node_modules/.bin/jest --runInBand",
"test:debugw": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.11.2",
"babel-jest": "^24.9.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.2",
"file-loader": "^4.2.0",
"jquery": "^1.9.1",
"postcss-loader": "^3.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"vee-validate": "^2.2.8",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue": "^2.0.2",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"sass": "^1.22.12",
"sass-loader": "^8.0.0",
"vue-jest": "^3.0.5",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"jest": {
"moduleFileExtensions": [
"jsx",
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules"
],
"testMatch": [
"**/test/unit/**/*.spec.(js|jsx|ts|tsx)|**/test/*.(js|jsx|ts|tsx)"
]
}
}
`//Webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.vue']
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.vue?$/,
exclude: /(node_modules)/,
use: 'vue-loader'
},
{
test: /\.js?$/,
exclude: /(node_modules)/,
use: 'babel-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
outputPath: './public',
}
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
fallback: 'file-loader'
}
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
fallback: 'file-loader'
}
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/image/svg+xml',
fallback: 'file-loader'
}
},{
// Apply rule for .sass or .scss files
test: /\.(sa|sc)ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
]
}
]
},
entry: {
index: './src/index.js'//,
//adminApp: './src/index.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: 'build.js'
},
plugins: [new HtmlWebpackPlugin({
favicon: './src/public/favicon.png',
template: './src/index.html',
filename: "./index.html"/*,
publicPath: '/public/'*/
})],
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:3001/api/v1'
})
}
}
//components.Navbar.spec.js
import BootstrapVue, { BNavbar, BNavbarBrand } from 'bootstrap-vue';
import Vuex from 'vuex'
import Router from 'vue-router';
import { createLocalVue, mount, shallowMount } from '#vue/test-utils';
import Navbar from '#/components/Navbar';
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(Router);
debugger;
localVue.use(BootstrapVue/*,{
components: {
BNavbar: true,
BNavbarBrand: true
}
}*/);
const router = new Router();
const mockActions = {
// fetchSomething: sinon.stub()
};
const store = new Vuex.Store({
state: {
account: {
status: {
loggedIn: false
}
}
}
});
describe('Navbar.vue', () => {
let wrapper;
beforeEach(()=>{
wrapper = shallowMount(Navbar, {
localVue,
store,
router/*,
stubs: {
"b-navbar": BNavbar,
"b-navbar-brand": BNavbarBrand
}*/
});
});
it("renders a vue instance", () => {
const wrapper = shallowMount(Navbar, {
computed: {
isConnected: (state) => {
if (state.account && state.account.status && state.account.status.loggedIn){
return true;
}
return false;
}
},
mocks: {
$store: {
state: { account: { status: { loggedIn: false } } }
}
}
})
expect(wrapper.isVueInstance()).toBe(true);
});
})
//Navbar.vue
<template>
<div>
<b-navbar toggleable="lg">
<b-navbar-brand href="/"><img src="../assets/logo_250.png">theappname</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">bla bla</b-nav-item>
<b-nav-item href="#">bla bla</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav v-if="isConnected" class="ml-auto">
…
<b-navbar-nav class="ml-auto" v-else>
….
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
data() {
return {
item: ''
}
},
computed: {
...mapState({
account: state => state.account
}),
isConnected: function () {
if (this.account && this.account.status && this.account.status.loggedIn){
return true;
}
return false;
}
},
methods: {
...mapActions('account', ['logout']),
}
}
I found the solution, in fact the problem wasn't in these files but was in .babelrc
I'm attempting to use a dynamic import to plug our server-generated config.js file into our production build of our app.
I attempt to use it in this way:
import('./config').then(function(config){
//create a global config variable
config = config;
})
(for now)
When I run webpack, I get the following error
Module build failed: SyntaxError: Unexpected token, expected { (1:6)
Research has led me to believe that this has something to do with babel-loader perhaps not playing nice with dynamic import, but I thought that had already been "solved" with a newer version.
Solutions seem to potentially have been to install Syntax Dynamic Import or maybe babel-plugin-dynamic-import-node, but it's not clear to me which one or why.
Relevant bits of my package.json:
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"build": "node config/webpack/build.js",
},
"dependencies": {
"amdi18n-loader": "^0.6.2",
"async": "^2.6.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-istanbul": "^4.1.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.3.0",
"css-loader": "^0.28.10",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.1",
"less-loader": "^4.0.6",
"promise-polyfill": "^7.1.0",
"raw-loader": "^0.5.1",
"style-loader": "^0.20.2",
"webpack": "^4.5.0"
},
"devDependencies": {
"autoprefixer": "^7.2.3",
"chromedriver": "^2.34.0",
"copy-webpack-plugin": "^4.3.0",
"cross-env": "^5.1.1",
"cross-spawn": "^5.1.0",
"eslint": "^4.13.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.1",
"friendly-errors-webpack-plugin": "^1.6.1",
"inject-loader": "^3.0.1",
"madge": "^2.0.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.9",
"rimraf": "^2.6.2",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"source-map-support": "*",
"uglifyjs-webpack-plugin": "^1.1.4",
"url-loader": "^0.6.2",
"uuid": "^3.1.0",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
}
We split our webpack.conf.js into webpack.base.conf
'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../');
function resolve(dir) {
return path.join(__dirname, '../..', dir);
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
});
module.exports = {
context: path.resolve(__dirname, '../../'),
entry: {
app: './public/js/ide.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
resolve: {
extensions: ['.js', '.json', '.less'],
alias: {
'#': resolve('public/js'),
},
modules: ['less', 'node_modules']
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('public/js'), resolve('test')],
exclude: [
path.resolve(__dirname, "public/js/config.js")
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.hbs$/,
use: ['raw-loader']
}
]
},
node: {
setImmediate: false,
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
};
...and webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'public/html/ide.html'
: config.build.index,
template: 'public/html/ide.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../../public/fonts'),
to: config.build.assetsFonts,
},
{
from: path.resolve(__dirname, '../../public/img'),
to: config.build.assetsImg,
}
])
]
});
In 1, a user indicated that babel-loader should "just work" with dynamic imports now, so I'm not sure what I'm missing. Something out of date? Something weird in my config?
There are a couple of things you need to do.
First, like some people in the comments mentioned, you need to use a different variable name for your config. Also, if you use import this way, the object you get is a ES6 exported object, so your data will be in default
import('./config').then(function(localConfig){
//create a global config variable
config = localConfig.default;
})
Next, the error you are getting is the result of babel not using the correct preset. You need to be at least on stage-2 for this to work.
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['es2015','stage-2']
}
include: [resolve('public/js'), resolve('test')],
exclude: [
path.resolve(__dirname, "public/js/config.js")
],
},
This will solve your error, but is still not what you want. All that is happening now is that webpack will split your config file into its own chunk, making a new http request on runtime to get this file. But it will not use the config file that is on the server, but the generated chunk from the build.
To load the actual config that you have on the server on runtime, you need to make a normal http request in your app.
Here is a good stackoverflow answer about this.
https://stackoverflow.com/a/36725115/9083959
I'm using eslint-loader (for webpack 2) in my application, and I have this error:
./src/index.js
Module parse failed: /home/brenopolanski/github/saiku/srep-ui/saiku-report-viewer-ui/node_modules/eslint-loader/index.js!/home/brenopolanski/github/saiku/srep-ui/saiku-report-viewer-ui/src/index.js Unexpected token (28:4)
You may need an appropriate loader to handle this file type.
| const renderApp = (NewRoot) => {
| render(
| <AppContainer>
| <NewRoot />
| </AppContainer>,
# multi react-hot-loader/patch webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./src/index
well... if I remove the eslint-loader in my webpack, my application work correctly, but I need the eslint-loader working in my webpack.
package.json
{
"scripts": {
"start": "webpack-dashboard -- node server.js",
"build": "npm run clean && npm run build:webpack",
"build:webpack": "cross-env NODE_ENV=production webpack --progress --config ./config/webpack.prod -p",
"test": "jest --coverage",
"test:watch": "npm run test -- --watch",
"storybook": "start-storybook -p 6006 -c storybook",
"build-storybook": "build-storybook -c storybook",
"clean": "rimraf build"
},
"devDependencies": {
"#kadira/storybook": "^2.35.3",
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-jest": "^18.0.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"chai": "^3.5.0",
"cross-env": "^3.1.4",
"css-loader": "^0.26.1",
"deepmerge": "^1.3.2",
"eslint": "^3.15.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-react": "^6.9.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"jest-cli": "^18.1.0",
"json-loader": "^0.5.4",
"postcss-loader": "^1.2.2",
"react-hot-loader": "^3.0.0-beta.6",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.4.0",
"svg-url-loader": "^2.0.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.3.0",
"webpack-dev-server": "^2.3.0",
"webpack-merge": "^2.6.1"
},
"dependencies": {
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"font-awesome": "^4.7.0",
"moment": "^2.17.1",
"pdfjs-dist": "^1.7.246",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-datepicker": "^0.40.0",
"react-dom": "^15.4.2",
"react-pdfjs": "^1.0.7",
"react-prop-types": "^0.4.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0"
}
}
.babelrc
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["react-hot-loader/babel"]
}
webpack.core.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '../build'),
filename: '[name]-[hash].js'
},
plugins: [
new HtmlPlugin({
title: 'Saiku Report Viewer',
template: path.join(__dirname, '../src', 'html', 'template.html')
}),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.core.js'),
useEslintrc: false
},
postcss: () => {
return [autoprefixer];
}
}
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'eslint-loader'
}
],
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'babel-loader'
},
{
test: /\.styl$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: '10000',
mimetype: 'application/octet-stream'
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'svg-url-loader',
query: {
limit: '10000',
mimetype: 'application/svg+xml'
}
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
query: {
limit: 8192
}
},
{
test: /\.ico(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
}
]
},
node: {
dns: 'empty',
net: 'empty',
tls: 'empty'
},
resolve: {
alias: {
src: path.join(__dirname, '../src'),
components: path.join(__dirname, '../src', 'components')
}
}
};
webpack.dev.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const merge = require('webpack-merge');
const core = require('./webpack.core');
module.exports = merge.smart(core, {
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, '../src', 'index')
],
output: {
publicPath: ''
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.dev.js')
}
}
})
],
module: {
loaders: [
{
test: /\.css$/,
include: /(node_modules|bower_components|src)/,
loaders: [
'style-loader',
'css-loader'
]
}
]
}
});
src/index.js
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root from './containers/Root';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './styl/saiku.styl';
const renderApp = (NewRoot) => {
render(
<AppContainer>
<NewRoot />
</AppContainer>,
document.querySelector('[data-js="app"]')
);
};
renderApp(Root);
if (module.hot) {
module.hot.accept('./containers/Root', () => {
const NewRoot = require('./containers/Root').default;
renderApp(NewRoot);
});
}
In your webpack.core.js you define both module.rules and module.loaders. Although the module.loaders is still valid, for compatibility reasons, Webpack seems to ignore it when module.rules is present.
To solve your problem you can simply put all loaders in module.rules. Since you're merging the two configs, you also have to update webpack.dev.js to use module.rules, which is also recommend by the official docs: https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules.
webpack.core.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '../build'),
filename: '[name]-[hash].js'
},
plugins: [
new HtmlPlugin({
title: 'Saiku Report Viewer',
template: path.join(__dirname, './src', 'html', 'template.html')
}),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.core.js'),
useEslintrc: false
},
postcss: () => {
return [autoprefixer];
}
}
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'eslint-loader'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'babel-loader'
},
{
test: /\.styl$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: '10000',
mimetype: 'application/octet-stream'
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'svg-url-loader',
query: {
limit: '10000',
mimetype: 'application/svg+xml'
}
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
query: {
limit: 8192
}
},
{
test: /\.ico(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
}
]
},
node: {
dns: 'empty',
net: 'empty',
tls: 'empty'
},
resolve: {
alias: {
src: path.join(__dirname, './src'),
components: path.join(__dirname, './src', 'components')
}
}
};
webpack.dev.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const merge = require('webpack-merge');
const core = require('./webpack.core');
module.exports = merge.smart(core, {
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, './src', 'index')
],
output: {
publicPath: ''
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.dev.js')
}
}
})
],
module: {
rules: [
{
test: /\.css$/,
include: /(node_modules|bower_components|src)/,
use: [
'style-loader',
'css-loader'
]
}
]
}
});