entry: 'entry.js',
output: {
filename: 'bundle.js',
library: 'App'
},
function initMap() {
var e = {
lat: 40.714909,
lng: -73.751213
}
, t = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: e
});
new google.maps.Marker({
position: e,
map: t
})
}
export {
initMap,
};
callback=App.initMap
<script type="text/javascript" src="./js/bundle.js"></script>
<script>
//Google Maps init
function initMap() {
var e = {
lat: 40.714909,
lng: -73.751213
}
, t = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: e
});
new google.maps.Marker({
position: e,
map: t
})
}
</script>
<script type="text/javascript" async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgD9raCgCP3YPNgS7DZyoB8t-Q8wCuaRY&callback=initMap"></script>
import libraryName from 'libraryName';
libraryName.someMethod();
import { someMethod } from 'libraryName';
someMethod();
npm install
npm run build:example
npm run build:browser
const greetings = 'Hello, friend';
let h1;
function say() {
h1 = document.createElement('h1');
h1.innerHTML = greetings;
document.body.appendChild(h1);
}
say();
if (module.hot) {
module.hot.dispose(() => {
document.body.removeChild(h1);
});
module.hot.accept();
}
const greetings = 'Hello, friend';
export default greetings;
import './styles.css';
let greetings = require('./greetings').default;
let h1;
function say() {
h1 = document.createElement('h1');
h1.innerHTML = greetings;
document.body.appendChild(h1);
}
say();
if (module.hot) {
module.hot.accept('./greetings', () => {
greetings = require('./greetings').default;
document.body.removeChild(h1);
say();
});
}
import './styles.css';
import greetings from './greetings';
let h1;
function say() {
h1 = document.createElement('h1');
h1.innerHTML = greetings;
document.body.appendChild(h1);
}
say();
if (module.hot) {
module.hot.accept('./greetings', () => {
document.body.removeChild(h1);
say();
});
}
includePaths
An array of paths that LibSass can look in to attempt to resolve your \@import declarations. When using data, it is recommended that you use this
webpack -p
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
new webpack.optimize.UglifyJsPlugin({
// options
}),
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV']),
new webpack.optimize.UglifyJsPlugin({
// options
}),
],
new webpack.EnvironmentPlugin(['NODE_ENV']),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0'
},
...
]
}
module: {
rules: [
{
test: /\.js$/,
exclude: /\/node_modules\//,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-0', 'react']
}
}]
},
...
]
}
module.exports = {
context: __dirname + "/public/js/",
entry: "./AuthForm",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "public/src")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ['es2015', 'stage-0', 'react']
}
}]
}
]
}
};
npm install -S babel-preset-es2015 babel-preset-react babel-preset-stage-0