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即可在看到刷新