webpack-3

How to fix modules with “ModuleConcatenation bailout: Module is not an ECMAScript module” bailout message?

由 末鹿安然 提交于 2019-12-08 14:46:13
问题 Webpack3 comes with the ModuleConcatenation plugin that when used with the --display-optimization-bailout flag will give you the reason for bailout. The bailout messages not that easy to understand, and it's hard to understand why they happened to a specific module. Here is my output for the webpack command on a very simplified version of my project: > webpack --bail --display-optimization-bailout Hash: 4a9a55dc2883e82a017e Version: webpack 3.4.1 Child client: Hash: 4a9a55dc2883e82a017e Time:

import html template in typescript

由 你。 提交于 2019-12-07 16:38:00
问题 I'm trying to import my html template so that webpack will recognize them and include them when I build. ( webpack -d ) According to this GitHub issue I should do this declare module '*.html' { const _: string; export default _; } Then import template from './myTemplate.html'; should work. But it doesn't quite do the trick. import template from './myTemplate.html'; console.log(template); // undefined However this "works" import * as template from './myTemplate.html'; console.log(template); //

Webpack can't load fonts (ttf)

由 ▼魔方 西西 提交于 2019-12-07 01:52:33
问题 Currently I have 3 fonts that I want to add to my React project: a, a light, a bold. My file structure: /src ├── /fonts/ │ ├── /A.ttf │ ├── /A-light.ttf │ └── /A-bold.ttf │ ├── /styles/ │ ├── /base/ │ │ └── /__base.scss │ └── styles.scss │ ├── app.jsx └── webpack.config.js _base.scss: @font-face { font-family: "A"; font-style: normal; font-weight: 400; src: url("../../fonts/A.ttf") format("truetype"); } @font-face { font-family: "A"; font-style: normal; font-weight: 800; src: url("../../fonts

import html template in typescript

由 Deadly 提交于 2019-12-06 01:41:19
I'm trying to import my html template so that webpack will recognize them and include them when I build. ( webpack -d ) According to this GitHub issue I should do this declare module '*.html' { const _: string; export default _; } Then import template from './myTemplate.html'; should work. But it doesn't quite do the trick. import template from './myTemplate.html'; console.log(template); // undefined However this "works" import * as template from './myTemplate.html'; console.log(template); // <p>Hello world!</p> Very strange. But now this doesn't work $routeProvider.when("/test", { template:

Webpack can't load fonts (ttf)

由 若如初见. 提交于 2019-12-05 09:30:50
Currently I have 3 fonts that I want to add to my React project: a, a light, a bold. My file structure: /src ├── /fonts/ │ ├── /A.ttf │ ├── /A-light.ttf │ └── /A-bold.ttf │ ├── /styles/ │ ├── /base/ │ │ └── /__base.scss │ └── styles.scss │ ├── app.jsx └── webpack.config.js _base.scss: @font-face { font-family: "A"; font-style: normal; font-weight: 400; src: url("../../fonts/A.ttf") format("truetype"); } @font-face { font-family: "A"; font-style: normal; font-weight: 800; src: url("../../fonts/A-bold.ttf") format("truetype"); } @font-face { font-family: "A"; font-style: normal; font-weight: 300

webpack3 jshint-loader does not work

由 戏子无情 提交于 2019-12-03 17:26:35
问题 I'm trying to follow this instruction https://webpack.js.org/loaders/jshint-loader/ and get an error: My config file: const path = require('path'); module.exports = { entry: { app: './index.js' }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, // include .js files enforce: "pre", // preload the jshint loader exclude: /node_modules/, // exclude any and all files in the node_modules folder use: [ { loader: "jshint-loader" } ] } ] },

webpack3 jshint-loader does not work

由 ☆樱花仙子☆ 提交于 2019-12-03 05:45:19
I'm trying to follow this instruction https://webpack.js.org/loaders/jshint-loader/ and get an error: My config file: const path = require('path'); module.exports = { entry: { app: './index.js' }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, // include .js files enforce: "pre", // preload the jshint loader exclude: /node_modules/, // exclude any and all files in the node_modules folder use: [ { loader: "jshint-loader" } ] } ] }, // more options in the optional jshint object jshint: { // any jshint option http://www.jshint.com

How come, Webpack directly imports webpack.config.babel.js?

由 偶尔善良 提交于 2019-12-01 11:09:24
问题 I am new on a pretty big ReactJS project. On top level, it does not have the usual webpack.config.js , but only a `webpack.config.babel.js'. That this one does indeed get used I can verify, when running > webpack gets called (through npm run with NODE_ENV=development and WEBPACK_CONFIG=server_dev², but that should not matter much). Why is that so? a) If I remove that babel-config, I get a rightful complaint, that: A configuration file could be named 'webpack.config.js' in the current

How to determine the installed webpack version

由 心不动则不痛 提交于 2019-11-29 20:33:35
Especially during the transition from webpack v1 to v2, it would be important to programmatically determine what webpack version is installed, but I cannot seem to find the appropriate API. Version Installed: Using webpack CLI : (--version, -v Show version number [boolean]) webpack --version or: webpack -v Using npm list command: npm list webpack Results in name@version-range : <projectName>@<projectVersion> /path/to/project └── webpack@<version-range> Using yarn list command: yarn list webpack How to do it programmatically? Webpack 2 introduced Configuration Types . Instead of exporting a

How to determine the installed webpack version

由 ﹥＞﹥吖頭↗ 提交于 2019-11-28 16:26:11
问题 Especially during the transition from webpack v1 to v2, it would be important to programmatically determine what webpack version is installed, but I cannot seem to find the appropriate API. 回答1: Version Installed: Using webpack CLI: (--version, -v Show version number [boolean]) webpack --version or: webpack -v Using npm list command: npm list webpack Results in name@version-range : <projectName>@<projectVersion> /path/to/project └── webpack@<version-range> Using yarn list command: yarn list
订阅 webpack-3