cnpm install webpack -g
Use cnpm instead of the default npm benefits you know~
2. Use the npm command to automatically generate the package.json file
npm init
3. Install the local webpack
cnpm install webpack -D
4. Small example
index .html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo</title>
<script src="bundle.js"></script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
bundle.js is the js file packaged by webapp by default, just refer to this script in html, and other js files that are actually used will be packaged into this file
entry.js
var a = require('./a');
//require('style-loader!css-loader!./index.css');
//import modA from './b';
require('./index.css');
window.onload = function () {
var box = document.getElementById('box');
box.innerHTML='<h3>hello webpack</h3> '+a;
//box.innerHTML='<h3>hello webpack</h3> '+(modA.a+modA.b);
}
Run the command webpack entry.js bundle.js in the project directory to
access index.html, and hello webpack appears, indicating that the webpack packaged
entry.js
successfully The file needs to be used
First use npm to install style-loader and css-loader
cnpm install style-loader css-loader -D
Add require('style-loader!css-loader!./index.css') to entry.js above ;
index.css
body{
background: salmon;
color:#fff;
font-size: 40px;
}
Visit index.html, hello webpack appears and the background color and other styles are successfully set.
In addition to css, webpack will automatically resolve dependencies
. Define an a.js content as follows
module.exports = 'yilianxinyuan';
Add var a = require('./a'); in entry.js to import a.js to get the content inside
6.webpack.config.js
Obviously, use require js or css directly in entry.js, and then every time It is inconvenient to have such a long command webpack entry.js bundle.js,
so it is necessary to simplify these operations through the configuration file webpack.config.js
module.exports={
entry:'./entry.js',
output:{
filename:'bundle.js'
},
devServer:
port:8088,
inline:true
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'},
{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/}
]
},
resolve:{
"extensions":['.js','.css']
}
};
DevServer and resolve can not look at
entry ---- define the entry
output of webpack --- define the exit
module of webpack --- loaders define js, css loader loader
Now directly use webpack to package entry.js into bundle .js
webpack -p package and compress
webpack -w monitor, automatically compile
webpack if the file changes -d enable debug mode to generate source maps, you can see the files before packaging in the browser
7. webpack configuration babel conversion
configuration babel preset execution
The command touch .babelrc
is written in the .babelrc file
{
"presets":['es2015']
}
And add
{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/} to the module in webpack.config.js,
so that you can write es6 with confidence and create a
new b.js
export default {
a:1,
b:2
}
Get b.js data in entry.js
import modA from './b'; box.innerHTML='<h3>hello webpack</h3> '+(modA.a+modA.b);
8. webpack-dev-server
This is a small server based on webpack. One of its very important functions is to define the port number and code changes to automatically refresh the browser.
First install the command environment cnpm install webpack-dev-server -g
and you can use it below The webpack-dev-server command packs the file
webpack-dev-server --port 8088 set the port number
webpack-dev-server --inline automatically refresh the browser after changing the code
webpack-dev-server --hot automatically Refreshing the browser
Of course , it is obviously inhumane to add these parameters every time the command is executed, so it can be configured in the configuration file
devServer:
port:8088,
inline:true
},
Visit http://localhost:8080 to get the index.html page result
9. Put the running command in package.json
"scripts": {
"dev": "webpack-dev-server"
},
In this way, the effect of entering npm run dev on the command line is equivalent to running webpack-dev-server