总结一下webpack的开发配置流程

1.创建项目目录 test

初始化文件目录，生成package.json文件

npm init 

安装的模块

<--! 项目依赖  -->
cnpm install webpack@3.5.5  --save-dev;
<--! 编译为HTML的插件  -->
cnpm install html-webpack-plugin --save-dev
<--! 热重载模块  -->
cnpm install  webpack-dev-server@2.7.1  --save-dev;
<--! 编译css文件loader  -->
cnpm install css-loader  style-loader  --save-dev
<--! 编译sass文件loader  -->
cnpm install sass-loader node-sass --save-dev
<--! 编译图片等静态文件loader  -->
cnpm install url-loader --save-dev
<--! 引入第三方插件  -->
cnpm install jquery moment  --save-dev
<--! 编译es6语法模块，添加支持  -->
cnpm install babel-loader babel-preset-env  --save-dev
cnpm install babel-plugin-transform-object-rest-spread --save -dev

 

webpack.config.js 文件配置

var path=require('path');
var HtmlwebpackPlugin=require('html-webpack-plugin');
//处理路径的/符号
var ROOT_PATH=path.resolve(__dirname);
//当主文件名是index.js时。可以省略路径，否则路径写全 app.ind.js
var APP_PATH=path.resolve(ROOT_PATH,'app/ind.js');
var BUILD_PATH=path.resolve(ROOT_PATH,'build');
module.exports={
  //指定入口文件
  entry:APP_PATH,
  //指定输出目录，
  output:{
      path:BUILD_PATH,
      filename:'build.js'
  },
  //插件引入
  plugins:[
      new HtmlwebpackPlugin({
          title:'hello world',
      })
  ],
  //热重载配置
  devServer:{
      historyApiFallback:true,
      hot:true,
      inline:true,
      
      contentBase:"./app"
  },
  //引入loader
  module:{
      loaders:[
          {
              //处理css文件  loaders 里面的顺讯是从右向左以次执行
              test:/\.css$/,
              loaders:['style-loader','css-loader']
          },
          {
              //处理sass文件
              test:/\.scss$/,
              loaders:['style-loader','css-loader','sass-loader']
          },
          {
              //处理图片等静态资源
              test:/\.(png|jpg)$/,
              loaders:['url-loader?limit=40000']
          },{
              test:/\.js$/,
              //编译es6语法
              exclude:/(node_modules|bower_components)/,
              use:{
                  loader:'babel-loader',
                  options:{
                      presets:['env'],
                      plugins:[require('babel-plugin-transform-object-rest-spread')]
                  }
              }
          }
      ]
  }

}