I have installed bootstrap and when I run the application using webpack I am facing this error:
Angularjs: Cannot find module “../../node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot”
Webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
'./app/app.js',
'./app/index.html',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8081/'
],
output: {
filename: 'bundle.js',
path: __dirname + './js'
},
module: {
loaders: [
// Exports Angular
{ test: /[\/]angular\.js$/, loader: "exports?angular" },
// Script Loaders
{ test: /\.coffee$/, loader: "coffee" },
{ test: /\.html/, loader: 'file?name=[name].[ext]' },
// Style Loaders, style! inlines the css into the bundle files
{ test: /\.css$/, loader: "style!css!less" },
{ test: /\.scss$/, loader: "style!css!sass" },
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
// activate source maps via loader query
'css?sourceMap!' +
'less?sourceMap'
)
},
{ test: /\.(jpg|png|gif)$/, loader: "file-loader?me=images/[hash]. [ext]"},
{ test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{ test: /\.(woff|woff2)$/, loader: "url?limit=10000&minetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]},
resolve: {
extensions: [
'',
'.js', '.coffee',
'.html',
'.css', '.styl', '.scss', '.less'
]},
plugins: [
// extract inline css into separate 'styles.css'
new ExtractTextPlugin('styles.css')
]};
Related
We are creating a react component, for some reason, we need it can be used in HTML directly. Like this one https://github.com/mui/material-ui/blob/master/examples/cdn/index.html. I am trying to use webpack to package my script, but it can't be used in HTML.
Here is my simple webpack config
const path = require('path');
module.exports = {
entry: glob.sync('./core/test/index.jsx'),
output: {
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'global',
filename: 'test.development.js',
},
devtool : 'source-map',
module: {
rules:[
{
test: /\.svg$/,
use: {
loader: 'svg-url-loader',
options: {
encoding: 'base64'
}
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(css|sass|scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
}
]
},
mode: 'development'
};
How should I do with the script?
I get contiously this error
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
my webpack.config.js is as this
var path = require('path');
var hwp = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')
},
module: {
rules: [
{ test: /\.tsx?$/, loader: ['ts-loader'] },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.scss$/, use: [{
loader: "style-loader" // creates style nodes from JS
strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{ test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=./Scripts/dist/[name].[ext]' }
]
},
plugins:[
new hwp({template:path.join(__dirname, '/src/index.html')})
]
}
can somebody help me, I have tried many samples of webpack.config.js but they don't work. is it really so hard to work with react?
I am new in react. I know how to code, but I can not build a project of my own
try the following snippet:
var path = require("path");
var hwp = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "/src/index.js"),
output: {
filename: "build.js",
path: path.join(__dirname, "/dist")
},
module: {
rules: [
{ test: /\.tsx?$/, loader: ["ts-loader"] },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=./Scripts/dist/[name].[ext]"
}
]
},
plugins: [new hwp({ template: path.join(__dirname, "/src/index.html") })]
};
I use webpack HotModuleReplacementPlugin to let my website could hot reload when I fix the code.
But I don't know how to build two html page.
I want to build two page "index.html" & "introduction.html"
Now I use these code in my webpack.config.js but it will have a problem, in the Chrome dev tool would show
「Uncaught Error: _registerComponent(...): Target container is not a DOM element.」
How could I solved these problem?
var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
var config = {
entry: {
index: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/index.jsx')
],
introduction: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/introduction.jsx')
],
},
output: {
path: path.resolve(__dirname, 'build'),
publishPath: '/',
filename: 'js/[name].js'
},
module: {
loaders: [
{
test:/\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
},
{
test: /\.sass$/,
execlude: /node_modules/,
loader: 'style!css!postcss!sass'
},{
test: /\.scss$/,
execulde: /node_modules/,
loader: 'style!css!postcss!sass'
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style!css!postcss',
},
{
test: /\.(jpg|png|gif)$/,
exclude: /node_modules/,
loader: 'file?name=images/[name].[ext]'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
]
},
postcss: [
autoprefixer({ browsers: ['last 2 versions']})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
exclude: [
/(test)/
],
devServer: {
contenBase: './dist'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html'
}),
new htmlWebpackPlugin({
filename: 'introduction.html',
template: './src/html/introduction.html'
}),
]
}
module.exports = config;
Her is my webpack.config.js and i am getting this error
element.loader.split is not a function
i also changed loader to loaders after searching for its answer but it's still not working
const postcssPlugins = [
require('postcss-cssnext')(),
require('postcss-modules-values')
];
const scssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
];
const postcssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: true } },
{ loader: 'postcss-loader', options: { plugins: () => [...postcssPlugins] } }
];
var path = require('path');
var config = {
entry: './todoApp.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 9191
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(scss|sass)$/,
loader: scssLoader,
include: [__dirname]
},
{ test: /\.css$/,
loader: postcssLoader,
include: [__dirname]
}
]
}
}
module.exports = config;
I am not able to find where the error is
Please guide!
Try to change loader by loaders:
{
test: /\.(scss|sass)$/,
loaders: scssLoader,
include: [__dirname]
},
{ test: /\.css$/,
loaders: postcssLoader,
include: [__dirname]
}
Somebody can help me on configuring webpack for following requirements
AngularJS (1.6) ES6 to ES5 converstion
SCSS to CSS compiler
All js to single bundle
All css to single bundle
All folder structure should created with html only ( no js files, since we alrady bundling it )
This is what I have tried so far
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.woff2$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=image/svg+xml'
}
]
},
plugins: [
//new ExtractTextPlugin("styles.css"),
]
};
Updated webpack conf
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}, {
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'file-loader?name=[name].[ext]&publicPath=../fonts/&outputPath=/assets/fonts/'
},
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=/assets/images/[name].[ext]' },
{
test: /\.(html)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.(json)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader' // compiles Sass to CSS
}],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('assets/css/styles.css')
]
};
sample project with webpack configured posted it in my github