webpack 个人配置

a.在全局中安装webpack：npm install webpack -g
b.将webpack安装到项目并将webpack写入package.json的devDependencies中：进入项目根目录，然后在命令行中输入npm install webpack –save-dev。
c.全局安装服务器：npm install webpack-dev-server -g
d.在项目中安装并将依赖写在package.json文件中:npm install webpack-dev-server –save-dev

*命令行

npm init //创建package.json
npm install webpack-dev-server --save-dev //安装服务器，默认端口8080
webpack-dev-server --hot --inline //自动打包
npm install --save-dev json-loader //处理json文件
npm install --save-dev style-loader css-loader //处理css文件
npm install --save-dev file-loader  //处理img、png等图像文件

webpack-config.js

module.exports = {
  entry: __dirname + "/js/index.js",//打包文件入口
  output: {
    path: __dirname +"/js",//打包后的文件存放的地方
    filename: "hello.js"//打包后输出文件的文件名
  },
  module: {//在配置文件里添加loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.(jpg|png)$/,
        loader: "file-loader"
      },
      {
        test:/\.css$/,
        loader:"style-loader!css-loader"
      }

    ]
  },
  devServer: {
    contentBase: "./",//本地服务器所加载的页面所在的目录
    port:"8080"
  } 
}

方便每次启动服务器自动刷新，配置一下package.json,在scripts下面加上

"build":"webpack-dev-server --hot --inline"

在命令行里输入：

npm run build

回车即可。