- Reference:
http://www.jianshu.com/p/c28e5df8647d http://www.jianshu.com/p/397df5dfd09c
1. The catalogue results for this case are as follows
Zpvue
App
Main.js
Module1.js
Module2.js
Public
Bundle.js
Index.html
Package.json
Webpack.config.js
2. Installing Webpack
NPM Install Webpack-save-dev --registry=https://registry.npm.taobao.org
Use the following command to Webpack initialization
NPM Init
Configuring the Webpack.json File
{
"name": "Zpvue",
"version": "1.0.0",
"description": "",
"main": "Index.js",
"Scripts": {
"test": "echo \" Error:no test specified\ "&& exit 1",
"start":"webpack-p" //corresponds to 5. Webpack's command.
},
"author": "Zeopean",
"license": "ISC",
"devdependencies": {
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3 "
}
}
- Scripts:start Bright corresponds to =>5.webpack's command
- Scripts.devdependencies in 3. When you install the loader, you are actively adding
3. Installing the loader loader
NPM Install sass-loader style-loader css-loader Extract-text-webpack-Plugin --save-dev--registry=https://registry.npm.taobao.org
4. Configuring the Webpack.config.js File
/**
* Created by Zeopean on 16/11/19.
*/
var webpack = require(' Webpack ')
var Extracttextplugin = require("Extract-text-webpack-plugin");
module. Exports = {
//Page entry
entry:{
Index: './app/main.js '
},
//ingress file output configuration
output:{
Path:'./public ',
FileName:' bundle.js '
},
//Load Module
Module: {
loaders:[{
Test:'/\.sass$/',
Loader:ExtractTextPlugin.extract (' Style-loader ', ' Css-loader!sass-loader ')
}]
},
plugins:[
New Extracttextplugin (' [name].css ')
]
};
- Entry means the entrance.
- Output indicates the bundle.js after packaging
- The module represents the loader
Commands for 5.webpack
about how to start the Webpack:
Webpack //The most basic way to start Webpack
Webpack-w //provide watch method; package updates in real time
Webpack-P //compress the packaged files
webpack-d //provide source map, convenient mode code
6. Bundle.js of the imported output
<! DOCTYPE html>
lang="en">
<meta CharSet="UTF-8">
<title>webpack demo</title>
<body>
</body>
<script Type="text/javascript" src=". /public/bundle.js "></script>
Simple use of Webpack