Run npm i
.babelrc is kinda a necessity now. Since Babel no longer uses ES2015 and React transforms by default, the require hook used by gulpfile.babel.js and mocha will not actually do anything. Fix this by creating a .babelrc in your project directory:
{
"presets": ["es2015", "react"]
}
- Add example.js in the entry
entry: [
...
'./examples/example'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
run npm start
and check console output
- Add babel loader
loaders: [
{ test: /\.jsx?$/, loader: 'babel', include }
]
run npm start
and check console output
- import 'src/sass/default.scss' in
example.js
// inside example.js
import '../.src/scss/default.scss';
And check the output in your terminal
- Add loaders for scss
{ test: /\.(s)*css$/, loader: "style!css!sass" }
- Run
npm run build
and check the console output - Add output config
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
run npm run build
and check console output
- Add js entries and babel loader
entry: [
'./src/index'
],
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', include: [ path.join(__dirname, 'src/') ] },
]
}
run npm run build
and check console output
- Change the output target to be
commonjs2
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: "commonjs2"
}
and check if you can require the module in node.js environment
- Add scss into entry
// require ExtractTextPlugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// Add default.scss into the entry
entry: [
'./src/scss/default.scss',
...
],
loaders: [
// Add css loaders
{ test: /\.(s)*css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") }
]
run npm run build
and check the files generated inside dist
folder .
- Uglify your javascripts
plugins: [
new webpack.optimize.UglifyJsPlugin()
],
now run npm run build
and check the content of dist/bundle.js