Skip to content

Instantly share code, notes, and snippets.

@dreyescat

dreyescat/README.md

Last active Apr 17, 2017
Embed
What would you like to do?
webpack resolve alias for relative paths

How to use webpack resolve-alias to solve relative paths.

npm install
mkdir -p src/components/Header
mv index.jsx src/components/Header
mkdir -p src/utils
mv myUtils.js src/utils
npm run build
import Header from 'myApp/components/Header';
// NOTE: MUST BE IN src/components/Header/
import { twice } from 'myApp/utils/myUtils';
console.log(twice(3));
const Header = {};
export default Header;
// NOTE: MUST BE IN src/utils/
export const twice = x => x * x;
{
"name": "test-webpack-alias",
"version": "1.0.0",
"description": "Alias relative paths",
"main": "index.js",
"scripts": {
"build": "webpack -w"
},
"keywords": [],
"author": "dreyescat",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-stage-1": "^6.5.0",
"webpack": "^1.12.14"
}
}
var path = require('path');
module.exports = {
entry: './index',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
resolve: {
alias: {
myApp: path.resolve(__dirname, 'src'),
},
extensions: ['', '.js', '.jsx']
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.