webpack Get Started
webpack
webpack is module bundler. Build management and Run local server to test it. webpack becomes more popular these days like Gulp.
webpack handles javascript as module.
Install webpack
Install globally, use node npm
npm install -g webpack
Simple js project with webpack
This project is simple webpack project.
Prepare 2 js which have dependencies.
webpack resolve these dependencies and build them as one js file
This is project structure
project
|- index.html
|- webpack.config.js
|- src
|- main.js
|- sub.js
webpack.config.js
This is webpack configuration file.
Add entry javascript and build setting and plugin(loader) setting are there
module.exports = {
entry: "main.js",
output: {
path: "./",
filename: "bundle.js"
}
};
entry is entry javascript
webpack resolved dependencies, in this case, main.js uses sub.js
main.js
var sub = require("./sub");
sub.hello();
require is to import other js
sub.js
module.exports.hello = function() {
alert('Hello');
}
export method to use in main.js
index.html
We use compiled javascript(dist/build.js)
<!DOCTYPE html>
<head>
<title>Webpack</title>
<script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>
<h3>Test</h3>
</body>
</html>
build
Source files were done. Next is prepare build.
webpack builds based on webpack.config.js
This file includes build setting.
To build type following
webpack
If there are no problems, dist/bundle.js is generated.
After it, you can open html file with this bundle
CSS
Next is CSS.
To import css as one js file, we can reduce source files.
It means that css files are imported into one javascript file.
To work with css, we need to use style-loader and css-loader
npm install --save-dev style-loader css-loader
Add CSS compile setting to webpack.config.js
module.exports = {
entry: "./src/main.js",
output: {
path: "dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css/,
loaders:["style-loader", "css-loader"]
}
]
}
};
The target is all css file and loaders are style-loader, and css-loader
Prepare css
project
|- index.html
|- webpack.config.js
|- src
| |- main.js
| |- sub.js
|- styles
|- style.css
Build
webpack
dist/bundle.js includes css, you don’t need to change html file.
TypeScript, Sass
For Sass addition to style-loader and css-loader, sass-loader is required.
npm install --save-dev sass-loader
For TypeScript, we need ts-loader
npm install --save-dev ts-loader
Project structure
project |- index.html |- webpack.config.js |- src | |- main.ts | |- styles | |- index.scss |- tsconfig.json
webpack.config.js
We need sass-loader, ts-loader
module.exports = {
entry: "./src/main.ts",
output: {
path: "dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.scss/,
loaders:["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.ts/,
loaders: ["ts-loader"]
}
]
}
}
We have two loaders, css group and typescript group.
For typescript, we need tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
Set up for commonjs, and es5
main.ts
declare function require(string): any;
require("../styles/index.scss");
class Main {
constructor() {
alert("TypeScript");
}
}
new Main();