example from https://laracasts.com/series/webpack-for-everyone
$ npm init -y
$ npm install webpack --save-dev
$ webpack src/main.js dist/bundle.js
$ node_modules/.bin/webpack src/main.js dist/bundle.js --watch
{
"scripts": {
"build" : "webpack src/main.js dist/bundle.js",
"watch" : "npm run build -- --watch"
}
}
$ npm run watch
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
};
$ npm run watch
see code
Notification.js
function announce (message) {
alert(message);
}
function log (message) {
console.log(message);
}
export default {
announce: announce,
log: log
}
import notification from './Notification';
notification.log('here we go');
notification.announce('here we go as an alert');
loaders teaches webpack to read any kid of files
$ npm install css-loader --save-dev
$ npm install style-loader --save-dev
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
styles were injected directly in html
$ npm install --save-dev babel-loader babel-core
npm install babel-preset-env --save-dev
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
};
.babelrc
{
"presets": ["env"]
}
we can do this
module.exports = {
entry: './src/main.js',
output: {
//---
},
module: {
//---
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
};
but it is good for production code not for development
so we leave empty plagins arey
plugins: []
and write if-statement
if (process.env.NODE_ENV === 'production') {
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin()
)
}
to test this we run
$ NODE_ENV=production node_modules/.bin/webpack
now bundle.js id minified
finaly we udate package.json script
{
"scripts": {
"dev": "webpack",
"production": "NODE_ENV=production webpack",
"watch": "npm run build -- --watch"
}
}
$ npm install sass-loader node-sass --save-dev
{
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
now we just paste the styles into html
npm install --save-dev extract-text-webpack-plugin
module.exports = {
entry: {
app: [
'./src/main.js',
'./src/main.scss' // now we don't need to call require('./main.scss') in main.js
]
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader'],
fallback: 'style-loader'
})
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new ExtractTextPlugin("[name].css"),
new webpack.LoaderOptionsPlugin({ // to decide whether to minimize or not
minimize: inProduction
})
]
};