1、在安装webpack 之前，相信你应该已经对你的项目进行了初始化。如果么偶有请执行下面命令（在你项目文件夹下的cmd）npm init

会自动生成package.json 文件

2、接下来用npm 下载webpack，注意：webpack 版本不能太高（不能是最新版本，不然后期会报很多错）

全局的

npm install webpack@3.10.0 -g

局部的(-D等同于 --save-dev)

npm install webpack@3.10.0 -D

下载完成后package.json文件中会如图信息：

3、手动在你的项目文件夹下（根文件夹）创建webpack.config.js文件或者webpackfile.js文件4、配置webpack（我这里用到了common.js模块化，module.exports）

webpack中最重要的两块：entry(入口)和output(出口)

（1）entry：当入口有很多文件并且压缩到不同文件时，entry就是一个对象，前面的键是压缩后的文件名，值是文件路径。（他们都要用引号包起来），（一个项目有很多js，所以大多数都会用这种方法）。如果只有一个js就entry:'./src/js/index.js',写。如果有两个js，并且压缩到一个文件下就 entry:['./src/js/index.js','./src/js/common.js'], 写。

（2）output：如果想把所有的js都压缩到一个文件下就filename:'name.js',写。如果要分开压缩就filename:'[name].js',写。

         path是压缩路径（压缩到哪）

（3）module：这块也很重要。尤其是rules，style-loader必须在css-loader前面；sass-loader必须在最后面（很重要，不然会报错）

• 
  
  //webpack配置项
  
  
• 
  
  const config = {
  
  
• 
  
      //入口
  
  
• 
  
      //entry:'./src/js/index.js',
  
  
• 
  
      //entry:['./src/js/index.js','./src/js/common.js'],
  
  
• 
  
      entry:{
  
  
• 
  
          'index':'./src/js/index.js',
  
  
• 
  
          'common':'./src/js/common.js',
  
  
• 
  
      },
  
  
• 
  
      //出口
  
  
• 
  
      //__dirname   当前文件所在目录的绝对路径
  
  
• 
  
      output:{
  
  
• 
  
          //filename:'index.js',
  
  
• 
  
          filename:'[name].js',
  
  
• 
  
          path:__dirname + '/dist/',
  
  
• 
  
      },
  
  
• 
  
      module:{
  
  
• 
  
          rules:[
  
  
• 
  
              {
  
  
• 
  
                  test:/\.css$/,
  
  
• 
  
                  use:['style-loader','css-loader','sass-loader'],
  
  
• 
  
              },
  
  
• 
  
              {
  
  
• 
  
                  test:/\.sass$/,
  
  
• 
  
                  use: ['style-loader','css-loader','sass-loader'],
  
  
• 
  
              },
  
  
• 
  
              {
  
  
• 
  
                  test:/\.html$/,
  
  
• 
  
                  // use:['html-loader'],
  
  
• 
  
                  use:{
  
  
• 
  
                      loader:'html-loader',
  
  
• 
  
                      options: {
  
  
• 
  
                          attrs: [':data-src'],
  
  
• 
  
                      }
  
  
• 
  
                  }
  
  
• 
  
  
  
  
• 
  
              },
  
  
• 
  
              {
  
  
• 
  
                  test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
  
  
• 
  
                  loader:'url-loader',
  
  
• 
  
                  options:{
  
  
• 
  
                      limit:10000,
  
  
• 
  
                      name:'../img/[name].[ext]'
  
  
• 
  
                  }
  
  
• 
  
              },
  
  
• 
  
              {
  
  
• 
  
                  test:/\.(woff2|eot|ttf|otf)(\?.*)?$/,
  
  
• 
  
                  loader:'url-loader',
  
  
• 
  
                  options:{
  
  
• 
  
                      limit:10000,
  
  
• 
  
                      name:'font/[name].[ext]'
  
  
• 
  
                  }
  
  
• 
  
              },
  
  
• 
  
          ]
  
  
• 
  
      },
  
  
• 
  
      // plugins:[
  
  
• 
  
      //     //html模板
  
  
• 
  
      //     new HtmlWebpackPlugin({
  
  
• 
  
  
  
  
• 
  
      //     }),
  
  
• 
  
      // ]
  
  
• 
  
  };
  
  
• 
  
  
  
  
• 
  
  //导出配置项
  
  
• 
  
  
  
  
• 
  
  

奈斯，加油加油