webpack2

1.安裝

1. 使用淘寶鏡像，將webpack安裝到全局 $ cnpm install webpack -g 查看webpack版本 $ webpack -v 
2. 在項目中安裝， $ cnpm install webpack --save-dev 
3. 安裝webpack開發工具， $ cnpm install webpack-dev-server --save-dev 

2.使用　

　　參數:

--progress //打包過程
 --display-modules  //打包模塊
 --colors //顏色
--display-reasons //打包緣由

3.配置

 webpack-config.js

'use strict';

const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = {
  context: __dirname + "/src",
  entry: {
    app: "./app.js",
  },
  output: {
    path: __dirname + "/dist",
    filename: "js/[name].js",
  },
  module:{
      rules:[{
              test:/\.js$/,
              loader:"babel-loader",
              options:{presets: ["latest"]},
              exclude:path.resolve(__dirname,'node_modules'),
              include:path.resolve(__dirname,'src')
        },{
            test:/\.css$/,
            loader:"style-loader!css-loader"
        },{
            test:/\.less$/,
            loader:"style-loader!css-loader!postcss-loader!less-loader"
        },{
            test:/\.html$/,
            loader:"html-loader"
        },{
            test:/\.(png|jpg|gif|svg)$/i,
            loader:'file-loader',
            options:{name:'assets/[name]-[hash:5]-[ext]'}
        }]
  },    
  plugins:[
      new htmlWebpackPlugin({
          filename:'app.html',
          template:'app.html',
          inject:'body',
          miniify:{
              removeComments:true,
              collapseWhitespace:true
          }
      }),
      new webpack.LoaderOptionsPlugin({
          options:{
              postcss:function(){
                  return [autoprefixer];
              }
          }
      })
  ]
};

package.json

{
  "name": "blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "111",
    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
  },
  "author": "wubenhui",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "css-loader": "^0.26.4",
    "eslint": "^3.17.0",
    "eslint-config-enough": "^0.2.5",
    "eslint-loader": "^1.6.3",
    "file-loader": "^0.10.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "less": "^2.7.2",
    "less-loader": "^3.0.0",
    "postcss-loader": "^1.3.3",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1"
  },
  "eslintConfig": {
    "extends": "enough",
    "env": {
      "browser": true,
      "node": true
    }
  }
}

 

 

3.其餘:安裝eslint, 檢查語法報錯, 當咱們書寫js時, 有錯誤的地方會出現提示. 

$ cnpm install eslint eslint-config-enough eslint-loader --save-dev 

 $ webpack --config xxxx 指定其餘config文件