1 首先npm init 建立package.json文件 npm init
2 然后全局安装webpack npm install webpack -g
3 在项目下安装webpack npm install webpack --save-dev
4 安装依赖模块 npm install --save-dev style-loader css-loader npm url-loader svg-url-loader --save-dev
5 编写webpack.config.js配置
var webpack = require('webpack');
module.exports = {
entry: __dirname+'/js/entry.js',
output: {
path: __dirname+'/js',
filename: 'bundle.js'
},
module: {
loaders: [
{test: /.css$/,loader: 'style-loader!css-loader'},
{test: /.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
{test: /.svg/, loader: 'svg-url-loader'}
]
}
};
编写entry.js入口：
require("!style!css!./style.css");
function calc(a,b){
var plus = require("./plus.js");
var sum = require("./sum.js");
return sum(sum(a,b),plus(a,b))
}
document.write("The result is ");
document.write(calc(2,3));
编写sum.js plus.js css:
function sum(a,b){ return a+b; } module.exports=sum;
function plus(a,b){ return a+2+b; } module.exports=plus;
body{ background-color: #ffffff; }
编写html,bundle.js在运行webpack命令会出现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="bundle.js"></script> </body> </html>
运行webpack命令后打开index
webpack构建本地服务器实现自动刷新：
npm install --save-dev webpack-dev-server
webpack.config.js中添加配置：
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 } }
package.json的scripts中添加配置：
"scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" },
此时运行npm run server即可在看到刷新