webpack-2

How to pass .env file variables to webpack config?

由 倾然丶 夕夏残阳落幕 提交于 2019-11-29 06:15:10
I am new to webpack and worked out almost all build sections, but now the problem is that I want to pass the environment variables from a .env file to webpack config, so that I can pass that variables to my build files via webpack.DefinePlugin plugin. Currently I am able to to pass environment variable directly from webpack to to my build. Please see the code below which I used in webpack. new webpack.DefinePlugin({ "API_URL": JSON.stringify("http://my-api.com"), "SECRET_KEY" : "MYSECRETKEYGOESHERE" }), My package.json build script is "scripts": { "start": "NODE_ENV=development webpack-dev

webpack2: how to import Bootstrap CSS for react-bootstrap to find its styles?

由 喜夏-厌秋 提交于 2019-11-29 04:47:50
I am using webpack 2 and react-bootstrap in my project ; I can't find how to have bootstrap CSS styles properly applied it seems like the .css file is not loaded, no matter which import statement I tried to use. As far as I understand I do not need the full bootstrap package with javascript etc. since I am using react-bootstrap ; I just need the CSS. So I added this in my main.js file: import 'bootstrap/dist/css/bootstrap.css'; It seems to work (no error message) but the styles are not applied... I configured the css loader in my webpack config file as described on webpack 2 documentation. Any

Testing with Jest and Webpack aliases

由 末鹿安然 提交于 2019-11-29 02:51:13
I am looking to be able to use webpack aliases to resolve imports when using jest, and optimally, reference the webpack.aliases to avoid duplication. Jest conf: "jest": { "modulePaths": ["src"], "moduleDirectories": ["node_modules"], "moduleNameMapper": { "^@shared$": "<rootDir>/shared/", "^@components$": "<rootDir>/shared/components/" } }, Webpack aliases: exports.aliases = { '@shared': path.resolve(paths.APP_DIR, 'shared'), '@components': path.resolve(paths.APP_DIR, 'shared/components'), }; Imports: import Ordinal from '@shared/utils/Ordinal.jsx'; import Avatar from '@components/common

Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type

由 大憨熊 提交于 2019-11-29 01:02:13
I am trying to import components from react-materialize as - import {Navbar, NavItem} from 'react-materialize'; But when the webpack is compining my .tsx it throws an error for the above as - ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an 'any' type. Any resolution for this .I'm unsure how to resolve this import statement to work with ts-loader and webpack. The index.js of react-materialize looks likes this . But how

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

Field 'browser' doesn't contain a valid alias configuration

由 旧城冷巷雨未停 提交于 2019-11-28 07:06:47
I've started using webpack2 (to be precise, v2.3.2 ) and after re-creating my config I keep running into an issue I can't seem to solve I get (sorry in advance for ugly dump): ERROR in ./src/main.js Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' Parsed request is a module using description file: [absolute path to my repo]/package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration aliased with mapping 'components': '[absolute path to my

Webpack2 not understanding @import statement in my SASS files (How to compile SASS with webpack2?)

由 自古美人都是妖i 提交于 2019-11-28 04:06:47
问题 Using Webpack 2 and sass-loader 4.11 webpack --config webpack.config.js Here is my webpack.config.js var path = require('path'); var sass = require("./sass/lifeleveler.scss"); module.exports = { entry: './dist/main.js', output: { filename: 'lifeleveler.app.js', path: path.resolve(__dirname, 'dist') }, watch: true, watchOptions: { aggregateTimeout: 300, poll: 1000, ignored: /node_modules/ }, module: { loaders: [ { test: /\.scss$/, include: [ path.resolve(__dirname, 'node_modules'), path

awesome-typescript-loader load / compile only refrenced files

由 ε祈祈猫儿з 提交于 2019-11-28 04:02:39
问题 Is it possible to configure the awesome-typescript-loader or webpack or the tsc to just compile files that are referenced (directly, indirectly) from the entry? I want to port an existing application and want to be able to compile my partially ported code while some unreferenced files are not compilable. Used tools awesome-typescript-loader: 3.1.2, webpack: 2.3.3 webpack.js var webpack = require('webpack'); module.exports = { entry: { 'index': './Scripts/index.ts', }, output: { path: helpers

Webpack Exclude a specific file

由 我只是一个虾纸丫 提交于 2019-11-27 23:29:57
问题 I have this code In my webpack.config.prod.js and I was wondering how do I exclude all json except one in a specific path like src/configs/configs exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, ], loader: require.resolve('file-loader'), options: { name: 'static/media/[name].[hash:8].[ext]', } ... 回答1: According to the Webpack documentation, you can do something like this. exclude: { test: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\

Webpack bundles my files in the wrong order (CommonsChunkPlugin)

由 混江龙づ霸主 提交于 2019-11-27 22:50:17
What I want is to bundle my JavaScript vendor files in a specific order via CommonsChunkPlugin from Webpack. I'm using the CommonsChunkPlugin for Webpack. The usage from the official documentation is straight forward and easy. It works as intended but I believe the plugin is bundling my files in alphabetical order (could be wrong). There are no options for the plugin to specify the order they should be bundled. Note: For those who are not familiar with Bootstrap 4, it currently requires a JavaScript library dependency called Tether. Tether must be loaded before Bootstrap. webpack.config.js
订阅 webpack-2