webpack2 詳解

1.安裝

npm install webpack -g

npm install webpack -save-dev

2.編輯配置文件

// 引入 path
var path=require('path')

module.exports = {
    // 指定spa應用的入口文件
    entry: path.resolve(__dirname, 'src/js/app.js'),
    // 指定項目構建的輸出位置
    output: {
    	// 輸出位置
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: 'bundle.js',
    }
}

3.運行

在項目根目錄執行webpack能夠啓動默認配置文件webpack.config.js
運行指定配置文件執行webpack --config webpack.develop.config.js

把運行命令放到package.json文件中

啓動命令還能夠加不少參數webpack --config webpack.develop.config.js --progress --profile --colors
這麼多參數不可能都記住，因此將啓動命令寫到package.json的script標籤中

監聽代碼變化自動從新構建

代碼的變更須要屢次運行npm run develop因此咱們須要自動監聽代碼變更，而後運行構建，因而咱們用到了webpack-dev-server這個模塊

（1）基本使用

a.下載npm install webpack-dev-server@9.9.9 -save-dev,注意選擇2.x版本的模塊
b.修改package.json文件中的命令webpack-dev-server --config webpack.develop.config.js --progress --profile --colors
c.修改開發配置文件

webpack2中推薦全部的服務配置信息都寫到配置文件中的devServer屬性中，不要寫在package.json中
基本配置

devServer: {
   // 指定啓動服務的更目錄
   contentBase: __dirname + '/src',
   // 指定端口號
   port: 8080,
   host: 'localhost',
   // 如下信息無關緊要，爲了完整
   inline: true, 
   historyApiFallback: true,
   noInfo: false,
   // stats: 'minimal',
   // publicPath: publicPath
},

（2）熱更新

能夠不刷新瀏覽器更新
修改配置文件

devServer: {
  // 指定啓動服務的更目錄
  contentBase: __dirname + '/src',
  // 指定端口號
  port: 8080,
  host: 'localhost',
  // 啓用熱更新
  hot: true,
  // 如下信息無關緊要，爲了完整
  inline: true, 
  historyApiFallback: true,
  noInfo: false,
  // stats: 'minimal',
  // publicPath: publicPath
},

須要配合一個內置插件一塊兒使用

var webpack=require('webpack')

plugins: [
  new webpack.HotModuleReplacementPlugin(),
]

Loaders（加載器）
在真正構建以前作一些預處理操做就叫加載器
1.處理es六、es七、jsx語法加載器

npm install babel-loader --save-dev
npm install babel-core babel-preset-es2015 babel-preset-react -save-dev
npm install babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3 --save-dev
npm install babel-plugin-transform-runtime -save-dev這個插件的做用是支持es7特性

修改配置文件

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader"
        }
      ]
    }
  ]
}

建立.babelrc文件

{
  "presets": [
    "es2015",
    "react",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

2.處理css文件引用的加載器

npm install style-loader css-loader -save-dev

修改配置文件

// 處理在js中引用css文件
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
},

3.處理scss或者less文件引用的加載器

npm install sass-loader less-loader node-sass -save-dev

修改配置文件

// 處理在js中引用scss文件
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
  test: /\.less$/,
  use: ['style-loader', 'css-loader', 'less-loader'],
},

4.處理圖片引用的加載器

npm install url-loader file-loader -save-dev

修改配置文件

// 處理圖片操做  25000bit ~3kb
{
  test: /\.(png|jpg|jpeg|gif)$/,
  use: 'url-loader'
},

5.處理字體文件引用的加載器

npm install url-loader file-loader -save-dev

修改配置文件

// 處理字體文件
{
  test: /\.(eot|woff|ttf|woff2|svg)$/,
  use: 'url-loader'
}

6.處理瀏覽器兼容前綴

npm install postcss-loader autoprefixer -save-dev

修改配置文件

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader",
    loader: "css-loader!postcss-loader"
  })
},
// 處理在js中引用scss文件
{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader",
    loader: "css-loader!postcss-loader!sass-loader"
  })
},
{
  test: /\.less$/,
  use: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader",
    loader: "css-loader!postcss-loader!less-loader"
  })
},

新建postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({browsers:'last 2 versions'})
  ]
}

7.處理統一風格管理

npm install eslint-loader -save-dev

修改配置文件

// 這個只是加載器部分的寫法，具體使用請看eslint文檔
{
  enforce: "pre",
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "eslint-loader",
  options:{
    configFile:'.eslintrc.js'
  }
},

8.處理vue文件

npm install vue-loader -save-dev

修改配置文件

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      js: [
          'babel-loader',
          {
            loader: "eslint-loader",
            options: {
              configFile: '.eslintrc.js'
            }
          }
      ],
      css: 'style-loader!css-loader'
    }
  }
},

發佈策略
簡單的說就是將開發階段的配置文件複製一份到部署的配置文件中，而後刪刪改改就能夠了
把熱更新插件刪除，devServer屬性刪除
修改圖片處理和字體處理加載器

// 處理圖片操做  25000bit ~3kb
{
  test: /\.(png|jpg|jpeg|gif)$/,
  use: 'url-loader?limit=25000&name=images/[name].[ext]'
},
// 處理字體文件
{
  test: /\.(eot|woff|ttf|woff2|svg)$/,
  use: 'url-loader?limit=100000&name=fonts/[name].[ext]'
}

接下來運行npm run publish就發佈了
不過要注意全部的css，js，圖片都構建到一個bundle.js文件中了

Plugins（插件）
在真正構建以後作一些後處理操做就叫插件

1.刪除插件

npm install clean-webpack-plugin -save-dev

使用

var CleanPlugin = require('clean-webpack-plugin');

plugins: [
  // 刪除文件夾的插件
  new CleanPlugin(['dist'])
]

2.抽取公共js插件

使用

entry: {
  app: path.resolve(__dirname, 'src/js/app.js'),
  vendors: ['vue','vue-router','vuex']
},

plugins: [
  // 分離第三方應用的插件
  new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
]

3.提取樣式文件插件

npm install extract-text-webpack-plugin@4.4.4 -save-dev注意下載2.x版本

使用

// 一、抽取css的第三方插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// 二、處理在js中引用css文件
{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader",
    loader: "css-loader"
  })
},
// 處理在js中引用scss文件
{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader",
    loader: "css-loader!sass-loader"
  })
},

//三、加一個插件
plugins: [
  // 刪除文件夾的插件
  new ExtractTextPlugin("app.css"),
]

4.自動生成html插件

npm install html-webpack-plugin -save-dev

在根目錄建立template.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>webpack學習</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

修改配置文件

var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
  // 自動生成html插件
  new HtmlWebpackPlugin({
    template: './src/template.html',
    htmlWebpackPlugin: {
      "files": {
        "css":["app.css"],
        "js": ["vendors.js", "bundle.js"]
      }
    },
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  }),
]

5.壓縮插件

修改配置文件

plugins: [
  // 壓縮混淆js代碼插件
  new webpack.optimize.UglifyJsPlugin({
    beautify: false,
    mangle: {
      screw_ie8: true,
      keep_fnames: true
    },
    compress: {
      warnings: false,
      screw_ie8: true
    },
    comments: false
  }),
]

6.定義生產環境插件

修改配置文件

plugins: [
  // 在構建的過程當中刪除警告
  new webpack.DefinePlugin({
    'process.env':{
      NODE_ENV:'"production"'
    }
  })
]

7.自動打開瀏覽器插件

npm install open-browser-webpack-plugin -save-dev

使用

// 自動打開瀏覽器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')

plugins: [
  // 刪除文件夾的插件
  new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
]

.