import bar from './bar';
bar();
export default function bar() {
//
}
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
}
};
<html>
<head> ... </head>
<body>
...
<script src="bundle.js"></script>
</body>
</html>
. entry - what files should I start to make a bundle?
. output - what’s the bundle name and path?
. loaders - It's not .js, but .txt, .css, .html, .ts, .jsx? Then, what should I do?
. plugins - What should I do more, e.g, minification, copy rights?
. $ npm install --save-dev webpack
. ## create a webpack.config.js
. $ webpack
module.exports = {
entry: './path/to/my/entry/file.js'
};
module.exports = {
...
output: {
filename: 'my-first-webpack.bundle.js'
}
};
module.exports = {
...
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader'}
]
}
}
module.exports = {
...
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
$ npm install webpack-dev-server --save-dev
$ node_modules/.bin/webpack-dev-server
https://github.com/ruanyf/webpack-demos
$ git clone https://github.com/ruanyf/webpack-demos.git
$ cd webpack-demos
$ npm i
$ cd demo01
$ webpack-dev-server