I am trying to introduce myself in webpack, this is my config server.js file:
const app = webpack({
devtool: 'source-map',
entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')],
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.js$/,
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
],
},
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/'
},
devtool: "source-map",
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.LoaderOptionsPlugin({
debug: true
})
]
});
I want to serve the files to express, this is the code:
// Serve static resources
app.use('/', express.static(path.resolve(__dirname, 'public')));
app.listen(APP_PORT, () => {
console.log(`App is now running on http://localhost:${APP_PORT}`);
});
but I had an error app.use is not a function. Help?
Related
I try to use Vue2 with Webpack4. Command webpack-dev-server finished with success, but it shows me only folders:
My webpack.config.js is:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './src/main.js',
output: {
publicPath: './',
path: path.join(__dirname, '/dist'),
filename: 'result.js',
},
devServer: {
compress: true,
port: 8532,
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.s[ac]ss$/i,
use: [
{ loader: 'vue-style-loader' },
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
exclude: [path.resolve(__dirname, "public/fonts")],
use: ['file-loader'],
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html',
minify: false,
})
],
};
This is my first experience with Vue.
What am I doing wrong?
Before that I tried to use vue-cli, but as I understood I can't use scss and Pug without Webpack.
Am I right?
I am building a web app in Visual studio and I am using Vuejs for frontend and .NET for backend. I have used webpack as the js bundler . Below is my webpack.config.cs file
var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
module.exports = {
context: __dirname,
entry: { main: './App/index.js' },
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=100000',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.ProvidePlugin({
Vue: ['vue/dist/vue.min.js', 'default'],
jQuery: 'jquery',
'window.jQuery': 'jquery',
$: 'jquery',
moment: 'moment',
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.min.js',
'jquery': 'jquery/src/jquery.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
}, output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
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
})
])
}
The node modules folder contains vue/dist which has many files namely: vue.common.js, vue.min.js and more.
The output of the file comes in the dist folder present in the wwwroot.
The problem I am facing is the application takes lots of time to load. How to speed up the process? I understand it's related to changing the webpack config, but I am unable to figure it out.
I tried to run the npm run build command on my vue project. It is successfully running but no dist folder is created. I want to build this project and run it on the server. I am currently working on Windows OS.
I tried to compare it with other project's webpack file but found no difference.
var path = require('path')
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: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse
mode, we map
// the "scss" and "sass" values for the lang attribute to the
right configs here.
// other preprocessors should work out of the box, no loader
config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// 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
})
])
}
This is my webpack config file. Please help me with this.
Try to check is there a folder created in where the webpack config file located.If there's not , it seems something wrong with your other configs, you can try this out, it works fine for me in project:
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'build.js',
publicPath: './static'
}
I am working vue CLI webpack setup and installed the awesome font package via npm. In the in the main.js i imported the font:
import 'vuetify/dist/vuetify.min.css'
i got the following error:
./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.css 7:684-735
# ./node_modules/font-awesome/css/font-awesome.css
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
and heres the standard webpack config file:
any ideas how to use the right loader?
regards
var path = require('path')
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
})
])
}
You don't need to plug vue-style-loader for css loading. This is an internal loader used by vue-loader.
rules: [
{
test: /\.css$/,
use: [
- 'vue-style-loader',
'css-loader'
],
}, {
You also need a loader for ttf file:
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use:[ { loader: "url-loader", options: {limit: 10000, mimetype: 'application/octet-stream'} }]
},
font-awsome will also require loader for woff file:
{
test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
use:[ { loader: "url-loader", options: {limit: 10000, mimetype: 'application/font-woff'} }]
},
I cannot figure out why the paths are so wrong when finding node modules. Here's my /webpack-dev-server.js
const chalk = require('chalk');
const webpack = require('webpack');
const env = require('../server/environment');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.development.js');
const server = new WebpackDevServer(webpack(webpackConfig), {
publicPath: '/client',
contentBase: '/client',
inline: true,
hot: true,
compress: true,
stats: false,
quiet: true,
noInfo: true,
lazy: false,
historyApiFallback: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'X-Requested-With'
},
proxy: {
"*": 'http://localhost:3000'
}
});
server.listen(env.WEBPACK_PORT, 'localhost', (err) => {
if (err) {
console.log(chalk.red(err));
}
console.log(chalk.yellow(`Webpack server listening on http://localhost:${env.WEBPACK_PORT}`));
});
which includes the basic webpack development setup. When I start up the webpack-dev-server above, I get the following error in the console:
AppContainer.scss?048e:4Uncaught Error: Cannot find module "!!./../../../node_modules/css-loader/index.js?modules!./../../../node_modules/autoprefixer-loader/index.js!./../../../node_modules/sass-loader/index.js!./AppContainer.scss"
I see the paths to the node_modules are incorrect. What's strange is that if I run an Express server and simply require the webpack-dev-server it works...
Here's my webpack config:
import path from 'path';
import webpack from 'webpack';
import env from '../server/environment';
export default {
target: 'web',
devtool: 'cheap-module-eval-source-map',
entry: [
`webpack-dev-server/client?http://localhost:${env.WEBPACK_PORT}`,
'webpack/hot/dev-server',
'babel-polyfill',
'./client/index'
],
output: {
path: path.join(__dirname, '../client'),
pathInfo: true,
publicPath: `http://localhost:${env.WEBPACK_PORT}/client/`,
filename: 'index.js'
},
resolve: {
root: path.join(__dirname, '..'),
modulesDirectories: [
'node_modules',
'client'
],
extensions: ['', '.json', '.js']
},
plugins: [
new webpack.DefinePlugin({
__DEV__: env.isDev,
__PRODUCTION__: env.isProd,
__TOKEN_KEY__: JSON.stringify(env.TOKEN_KEY),
__ENV__: JSON.stringify(env.ENV)
}),
new webpack.HotModuleReplacementPlugin()
],
module: {
noParse: /\.min\.js/,
loaders: [
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file' },
{ test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000' },
{
test: /\.ttf(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.svg(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader?limit=10000&mimetype=image/svg+xml'
},
{ test: /\.(jpe?g|png|gif)$/i, loaders: ['file'] },
{ test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.json$/, loader: 'json' },
{ test: /\.scss$/, loader: 'style!css?modules!autoprefixer!sass' },
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
}
]
}
};
I needed to correctly extend the base config class.