I got following error when I was transpiling the webpack.
**error message**
$ npm run build
> webpack
Hash: d3c6c864b2d5118a08d7
Version: webpack 4.8.3
Time: 399ms
Built at: 2018-06-04 20:51:32
1 asset
Entrypoint main = bundle.js
[0] ./src/index.js 249 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.js
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "../component/chatapp";
|
| ReactDOM.render(<App />, document.getElementById("root"));
|
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 519 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
+ 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! website#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the website#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\bca19\AppData\Roaming\npm-cache\_logs\2018-06-04T11_51_32_160Z-debug.log
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(path.resolve(__dirname, "src"), "index.js"),
output: {
path: path.resolve(__dirname, "public"),
filename: 'bundle.js'
},
mode: 'production',
resolve: {
extensions: ['js', '.jsx']
},
module: {
rules: [{
test: /\.(js|jsx)$/,
loader: "babel-loader",
include: [
path.resolve(__dirname + "component"),
path.resolve(__dirname + "src")
],
exclude: [
path.resolve(__dirname, "node_modules")
],
query: {
presets: ["react", "es2015"]
}
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader"
})
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
"css-loader",
"sass-loader"
]
})
}]
},
plugins: [
new HtmlWebpackPlugin({
title: "ę´‘talk",
filename: path.resolve(__dirname, "public", "index.html")
})
],
devtool: "inline-source-map",
devServer: {
contenBase: path.resolve(__dirname, "public"),
compress: true,
port: 3000
}
};
package.json
{
"name": "website",
"version": "1.0.0",
"description": "test website",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"express-handlebars": "^3.0.0",
"jquery": "^3.3.1",
"path": "^0.12.7",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"socket.io": "^2.1.1"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"sass-loader": "^7.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"zombie": "^6.1.2"
},
"babel": {
"presets": [
"es2015"
]
}
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "../component/chatapp";
ReactDOM.render(<App />, document.getElementById("root"));
chatapp.js
import React from "react";
class ChatApp extends React.Component {
render() {
return (
<div>mission success</div>
);
}
}
export default ChatApp;
I don't know why my codes are not working.
Maybe the path of the rule is wrong.Try
include: [
path.resolve(__dirname , "component"),
path.resolve(__dirname ,"src")
],
You are missing a dot before the file extension.
extensions: ['.js', '.jsx']
Related
I have a problem using the html-webpack-plugin. I am learning React, and I need to use html-webpack-plugin, but when I run it in developer mode, I have this error:
Error: Child compilation failed:
Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/react-shop'
ModuleNotFoundError: Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/ react-shop'
at /home/paolo/develop/react-shop/node_modules/webpack/lib/Compilation.js:2016:28
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:798:13
at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js: 33:10), :10:1)
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:270:22
at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js: 33:10), :9:1)
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:541:15
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:116:11
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:612:8
at /home/paolo/develop/react-shop/node_modules/neo-async/async.js:2830:7
at done (/home/paolo/develop/react-shop/node_modules/neo-async/async.js:2925:13)
- Compilation.js:2016
[react-shop]/[webpack]/lib/Compilation.js:2016:28
- NormalModuleFactory.js:798
[react-shop]/[webpack]/lib/NormalModuleFactory.js:798:13
- NormalModuleFactory.js:270
[react-shop]/[webpack]/lib/NormalModuleFactory.js:270:22
- NormalModuleFactory.js:541
[react-shop]/[webpack]/lib/NormalModuleFactory.js:541:15
- NormalModuleFactory.js:116
[react-shop]/[webpack]/lib/NormalModuleFactory.js:116:11
- NormalModuleFactory.js:612
[react-shop]/[webpack]/lib/NormalModuleFactory.js:612:8
- async.js:2830
[react-shop]/[neo-async]/async.js:2830:7
- async.js:2925 done
[react-shop]/[neo-async]/async.js:2925:13
- child-compiler.js:169
[react-shop]/[html-webpack-plugin]/lib/child-compiler.js:169:18
- Compiler.js:551 finalCallback
[react-shop]/[webpack]/lib/Compiler.js:551:5
- Compiler.js:577
[react-shop]/[webpack]/lib/Compiler.js:577:11
- Compiler.js:1196
[react-shop]/[webpack]/lib/Compiler.js:1196:17
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[react-shop]/[tapable]/lib/Hook.js:18:14
- Compiler.js:1192
[react-shop]/[webpack]/lib/Compiler.js:1192:33
- Compilation.js:2787 finalCallback
[react-shop]/[webpack]/lib/Compilation.js:2787:11
- Compilation.js:3092
[react-shop]/[webpack]/lib/Compilation.js:3092:11*
`
I have already installed the plugin. This is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development',
resolve: {
extensions: [ '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: {
loader: 'HtmlWebpackPlugin',
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html'
})
]
}
This is my package.
{
"name": "react-shop",
"version": "1.0.0",
"description": "react eshop",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open",
"build": "webpack --mode production"
},
"keywords": [
"react",
"javascript"
],
"author": "Josue Quichca <josuelml28#hotmail.com>",
"license": "MIT",
"dependencies": {
"#babel/core": "^7.20.2",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1"
}
}
I am learning. Please help!
Try this:
Remove html-webpack-plugin from your package.json
rm -rf node_modules
npm cache clean -f
npm i html-webpack-plugin --save-dev
I have a small JS project compiled by webpack 5.26 with the following structure:
>dist
>src
>js
>classes
carousel.js
navBar.js
neso.src.js
>scss
When running npm run watch, changes made in navBar.js or carousel.js are not outputted after the initial build. Changes made in files in the scss folder and neso.src.js are outputted.
Command line output on these occurances looks like this:
assets by status 72.1 KiB [cached] 1 asset
cached modules 56.1 KiB (javascript) 997 bytes (runtime) [cached] 16 modules
webpack 5.26.0 compiled successfully in 131 ms
I've tried adding the watchOptions property and changing the entry property value in my webpack.config.js. I've also tried changing the import/export declarations in neso.src.js but nothing helped and changes in classes files still aren't being output on watch. Please can you advise how to achieve this.
package.json
{
"name": "Neso-test",
"version": "0.0.1",
"description": "",
"private": true,
"main": "dist/neso.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack",
"build": "cross-env NODE_ENV=production webpack",
"watch": "cross-env NODE_ENV=development webpack --watch --progress",
"serve": "cross-env NODE_ENV=development webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"babel-loader": "^8.2.2",
"cross-env": "^7.0.3",
"css-loader": "^5.1.3",
"mini-css-extract-plugin": "^1.3.9",
"postcss": "^8.2.8",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.26.0",
"webpack-cli": "^4.5.0"
}
}
webpack.config.json
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
module.exports = {
mode: mode,
entry: path.resolve(__dirname, "src/js/neso-src.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "neso.js",
library: "Neso",
libraryTarget: "umd",
},
devtool: "source-map",
devServer: {
contentBase: "./dist"
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.(s[ac]|c)ss$/i, // This regex adds support for .scss, .sass and .css file types
use: [
mode === 'development' ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"postcss-loader"
],
}
],
},
plugins: [
new MiniCssExtractPlugin()
],
watchOptions: {
aggregateTimeout: 200,
poll: 1000,
},
}
The code in neso-src.js had this import statement:
import NavBar from './classes/NavBar.js';
and the referenced filename was actually navBar.js.
Changing the import statement to import NavBar from './classes/navBar.js'; worked and changes in that file now trigger a recomplile. (Uppercase 'N' to lowercase 'n').
Real credit goes to this answer which pointed me in the right direction.
So for my first ReactJS tutorial I was using a Ubuntu VM, and remember running into this problem because I forgot to install react and react-dom dependencies. I am now on windows, have made sure to install everything and I am getting the same error:
For my package.json I have this:
{
"name": "github-battle",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.9",
"html-webpack-plugin": "^2.30.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.20.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
},
"scripts": {
"create": "webpack"
},
"author": "",
"license": "ISC"
}
For my webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
};
index.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./index.css');
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Is there something I have to do differently in windows?
I tried to create a new project with all the file you pasted and I got the same error. I resolved it by running those 2 commands:
npm install --save react
npm install --save react-dom
I also added a .babelrc file containing this:
{
"presets": ["react"]
}
So I have an older project that I am trying to work on again, and when I type in the command npm start in terminal I get a very long error message. Here it is.
# start /Users/juanlopez/tiy/week-5/day-4/portfolio-2.0
webpack-dev-server
/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0/webpack.config.js:88
new webpack.optimize.OccurenceOrderPlugin(),
^
TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
at Object. (/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0/webpack.config.js:88:5)
After these errors in web pack npm throws these errors
npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/Cellar/node/7.1.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! # start: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # start script 'webpack-dev-server'.
Does anyone know what I did wrong here? Is it something to do with the version of webpack I am running? I have already tried updating webpack and node.
Here is my JSON
{
"private": true,
"scripts": {
"deploy": "npm run build && surge ./public --domain portfolio-2-0.chriskramer2020.surge.sh",
"start": "webpack-dev-server",
"build": "rm -rf public && NODE_ENV=production webpack --optimize-minimize --progress --profile --colors"
},
"dependencies": {
"extract-text-webpack-plugin": "^2.1.0",
"jquery": "^3.1.1",
"json-loader": "^0.5.4",
"mobx": "^3.0.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.1",
"whatwg-fetch": "^2.0.1"
},
"devDependencies": {
"autoprefixer": "^6.5.4",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"browser-sync": "^2.18.5",
"browser-sync-webpack-plugin": "^1.1.3",
"css-loader": "^0.26.1",
"eslint": "^3.12.2",
"eslint-config-standard": "^6.2.1",
"eslint-config-standard-react": "^4.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-react": "^6.8.0",
"eslint-plugin-standard": "^2.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"json-loader": "^0.5.4",
"node-sass": "^4.0.0",
"postcss-loader": "^1.2.1",
"raw-loader": "^0.5.1",
"react-hot-loader": "next",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"stylelint": "^7.6.0",
"stylelint-config-standard": "^15.0.0",
"surge": "^0.18.0",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2",
"webpack-merge": "^1.1.1",
"webpack-validator": "^2.3.0"
}
}
Here is my Webpack.config
enter code here
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const validate = require('webpack-validator')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const ROOT_PATH = path.resolve(__dirname)
const SRC_PATH = path.resolve(ROOT_PATH, 'src')
const BUILD_PATH = path.resolve(ROOT_PATH, 'public')
const common = {
entry: [
'whatwg-fetch',
SRC_PATH
],
output: {
filename: 'bundle.js',
path: BUILD_PATH,
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(SRC_PATH, 'index.html'),
inject: 'body',
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}
})
],
module: {
loaders: [{
test: /\.js$/,
include: [SRC_PATH],
loader: 'babel'
}, {
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'file'
}, {
test: /\.(sass|s?css)$/,
loaders: [
'style',
'css',
'postcss',
'sass'
]
}]
},
postcss: () => {
return [
require('autoprefixer')
]
}
}
const development = {
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server'
],
output: {
devtoolModuleFilenameTemplate: '[resource-path]'
},
devServer: {
historyApiFallback: true,
hot: true,
stats: { colors: true, chunks: false }
},
plugins: [
new webpack.HotModuleReplacementPlugin({ multiStep: true }),
new webpack.SourceMapDevToolPlugin(),
new BrowserSyncPlugin({ proxy: 'http://localhost:8080/' }, { reload: false })
],
module: {
loaders: [{
test: /\.html$/,
loader: 'raw'
}]
}
}
loaders: [
{
test: /\.css$/,
loaders: [
"style-loader",
{ loader: "css-loader", query: { modules: true } },
{
loader: "sass-loader",
query: {
includePaths: [
path.resolve(__dirname, "some-folder")
]
}
}
]
}
]
const production = {
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
]
}
new webpack.LoaderOptionsPlugin({
test: /\.css$/, // optionally pass test, include and exclude, default affects
all loaders
minimize: true,
debug: false,
options: {
// pass stuff to the loader
}
})
module.exports = validate(merge.smart(
process.env.npm_lifecycle_event === 'build'
? production
: development,
common
))
you need to use OccurrenceOrderPlugin instead of OccurenceOrderPlugin.
and one more thing you don't need this plugin anymore, now occurrence order is on by default
https://gist.github.com/sokra/27b24881210b56bbaff7#occurrence-order
Webpack loaders aren't working, so here goes all the issue information
OS: windows 10
node: 8.2.1
npm: 5.3.0
the console error message when I try to run npm run dev :
ts-loader: Using typescript#2.1.6 and C:\MAMP\htdocs\wordpress\wp-content\themes\angular-project\tsconfig.json
#
# Fatal error in api.cc, line 1200
# Check failed: !value_obj->IsJSReceiver() || value_obj->IsTemplateInfo().
#
==== C stack trace ===============================
v8::internal::interpreter::BytecodeArrayRandomIterator::UpdateOffsetFromIndex [0x00007FF7113BF426+8086]
v8::Template::Set [0x00007FF710EF9FAD+349]
Nan::SetPrototypeTemplate [0x00007FFED066DBA3+131] (c:\mamp\htdocs\wordpress\wp-content\themes\angular-project\node_modules\nan\nan.h:1847)
SassTypes::Boolean::get_constructor [0x00007FFED0672E99+329] (c:\mamp\htdocs\wordpress\wp-content\themes\angular-project\node_modules\node-sass\src\sass_types\boolean.cpp:26)
SassTypes::Factory::initExports [0x00007FFED0675B19+489] (c:\mamp\htdocs\wordpress\wp-content\themes\angular-project\node_modules\node-sass\src\sass_types\factory.cpp:55)
node_module_register [0x00007FF710C47745+2437]
v8::internal::interpreter::Interpreter::GetDispatchCountersObject [0x00007FF7114A1C20+54448]
std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::zone_allocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Reallocate [0x00007FF710FE1598+113688]
std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::zone_allocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Reallocate [0x00007FF710FE0453+109267]
std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::zone_allocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Reallocate [0x00007FF710FE033B+108987]
(No symbol) [0x000002040D6840C1]
npm ERR! code ELIFECYCLE
npm ERR! errno 3221225477
npm ERR! halo-effect#0.0.1 dev: `npm run clean && webpack --config=webpack-dev.config.js`
npm ERR! Exit status 3221225477
npm ERR!
npm ERR! Failed at the halo-effect#0.0.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\wagner\AppData\Roaming\npm-cache\_logs\2017-07-24T14_40_15_990Z-debug.log
/c/Program Files/nodejs/npm: line 34: 3084 Segmentation fault "$NODE_EXE" "$NPM_CLI_JS" "$#"
npm list webpack is returning empty but it is inside node_modules as version 1.13.1 as is listed on package.json file:
$ npm list webpack
project-name#0.0.1 C:\MAMP\htdocs\wordpress\wp-content\themes\angular-project
`-- (empty)
package.json:
{
"name": "my-project",
"keywords": [
"angular",
"typescript"
],
"scripts": {
"generator": "node generator.js",
"clean": "rm -f ../halo-wordpress-theme/css/* && rm -f ../halo-wordpress-theme/js/*",
"dev": "npm run clean && webpack --config=webpack-dev.config.js",
"release": "npm run clean && webpack --config=webpack-release.config.js"
},
"dependencies": {
"#types/angular": "1.6.27",
"#types/angular-cookies": "1.4.4",
"#types/angular-mocks": "1.5.10",
"#types/angular-ui-router": "1.1.37",
"#types/es6-shim": "0.31.34",
"#types/jasmine": "2.5.53",
"#types/jasmine-matchers": "0.2.30",
"#types/lodash": "4.14.71",
"#types/ng-dialog": "0.6.2",
"#types/ng-file-upload": "12.2.1",
"angular": "1.6.5",
"angular-cookies": "1.6.5",
"angular-mocks": "1.6.5",
"#uirouter/angularjs": "1.0.3",
"autoprefixer": "7.1.2",
"bootstrap-sass": "3.3.7",
"clipboard": "1.7.1",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.4",
"extract-text-webpack-plugin": "3.0.0",
"html-loader": "0.4.5",
"lodash": "4.17.4",
"ng-dialog": "1.3.0",
"ng-file-upload": "12.2.13",
"ng-infinite-scroll": "1.3.0",
"ngclipboard": "1.1.1",
"node-sass": "4.5.3",
"postcss-loader": "2.0.6",
"precss": "2.0.0",
"sass-lint": "1.10.2",
"sass-loader": "6.0.6",
"sasslint-webpack-plugin": "1.0.4",
"string": "3.3.3",
"style-loader": "0.18.2",
"ts-loader": "2.3.1",
"tslint": "5.5.0",
"tslint-loader": "3.5.3",
"typescript": "2.4",
"vorpal": "1.12.0",
"webpack": "1.13.1"
}
}
webpack-dev-config.js:
var path = require('path');
var webpack = require('webpack');
var loaders = require("./webpack-loaders");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var sassLintPlugin = require('sasslint-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var PATHS = {
app: path.join(__dirname, 'src/index.ts'),
dist: path.join(__dirname, '../myproject-wordpress-theme/js/')
};
module.exports = {
devtool: "source-map",
watch: true,
debug: true,
entry: {
app: [
PATHS.app
]
},
output: {
path: PATHS.dist,
filename: '[name].js',
devtoolModuleFilenameTemplate: function(info) {
return "file:///"+info.absoluteResourcePath;
}
},
resolve: {
root: __dirname,
extensions: ['', '.ts', '.js', '.json', '.scss']
},
module: {
loaders: loaders
},
postcss: function () {
return [autoprefixer, precss];
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new CopyWebpackPlugin([
{from: 'fonts/', to: '../fonts/'}
]),
new webpack.optimize.DedupePlugin(),
new ExtractTextPlugin('../css/app.css', { allChunks: true }),
new sassLintPlugin({
configFile: '.sass-lint.yml',
ignoreFiles: [
path.join(__dirname, 'src/common/footer.scss'),
path.join(__dirname, 'src/common/normalize.scss')
],
glob: 'src/**/*.s+(a|c)ss',
ignorePlugins: ['extract-text-webpack-plugin']
})
]
};
webpack-loaders.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = [
{
test: /\.ts$/,
loader: 'ts-loader'
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader?-url!postcss-loader"),
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader?-url!postcss-loader!sass-loader?outputStyle=expanded")
}
];