webpack——一站到底二

續webpack一——一站到底
(7)webpack-dev-server 啓動一個本地服務

下載：npm i webpack-dev-server -g  //全局安裝
  不在插件裏 單獨
  devServer: {
      host:'localhost',
      port:4000,
      contentBase:_dirname + '/dev'
  }
  固然也能夠配置代理
  proxy: {
      '/api':{
          target: 'http://localhost',
          changeOrigin:true,
          pathRewrite: {
              '^/vip': ''
          }
      }
  }

(8)webpack.BannerPlugin 在文件頭添加註釋
(9)webpack.DefinePlugin 定義環境變量

const webpack = require('webpack');
const NODE_ENV = process.env.NODE_ENV; // 從命令行環境獲取 NODE_ENV 參數
module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(NODE_ENV)
            } // 定義瀏覽器中的替換的變量爲 `process.env.NODE_ENV`
        })
    ]
}

(10)可是若是打包完文件體積仍是太大怎麼辦呢？

咱們能夠用另一個插件CommonsChunkPlugin
設置：
{
  entry: {
   bundle: 'app'
    vendor: ['app']
  }

  plugins: {
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
  }
}   
可是頁面必須引入
 <script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

(11) 分析打包後項目用到的各類包的大小 webpack-visualizer-plugin

var Visualizer = require('webpack-visualizer-plugin');

//...
plugins: [new Visualizer({
  filename: './statistics.html'
})],
//...

其餘

1.版本號控制

下載htmlwebpackplugin插件
getPath('[name]@[chunkhash:6].css')
css 和 js 多 chrunk
// 生成抽離文本文件插件的實例
    new ExtractTextPlugin({
      filename: (getPath)=>{
        return getPath('[name]@[chunkhash:6].css').replace('scripts', 'styles')
      },
      allChunks: true
    }),

2.devtool: 'source-map' 源碼映射 方便開發時調試代碼
3.環境變量配置(mac)

設置：
    >cd ~/.profile
    >node
    >process.env
  出去  >export NODE_ENV=production   //配置環境變量
       //查看
       >node
       >process.env.NODE_ENV   => 'production'
 window下是 set NODE_ENV=production
 
 而後在package.json下
 「script」: {
     "dev": "export NODE_ENV=dev && webpack && webpack-dev-server",
     "build": "export NODE_ENV=prod && webpack"
 }
 而後在config.js中針對環境進行判斷 打包

3、安裝

npm i webpack -g

4、配置

webpack.config.js,同gulpfile.js和Gruntfile.js同樣，就是配置項

5、可實施的配置

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

// 引入文本抽離插件
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// 引入html生成插件
var HtmlWebpackPlugin = require('html-webpack-plugin')

// 引入openBrowser 插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')

var outputDir = ''

if (process.env.NODE_ENV === 'dev') {
  outputDir = '/dev'
} else {
  outputDir = '/prod'
}

var public = {
  // 配置入口
  entry: {
    'scripts/app': './src/scripts/app.js',
    'scripts/search': './src/scripts/search.js'
  },

  // 配置出口
  output: {
    filename: '[name]@[chunkhash:6].js',
    path: __dirname + outputDir  // 必須是絕對路徑
  },

  // devtool 配置
  devtool: 'source-map',

  // 配置模塊
  module: {
    rules: [
      // 解析ES6+
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules下.js的解析
        use: [
          {
            loader: 'babel-loader' // 應用babel-loader解析ES6+
          }
        ]
      },

      // 加載scss
      {
        test: /\.scss$/,
        use:
        //[
          // { loader: 'style-loader' },
          // { loader: 'css-loader' },
          // { loader: 'sass-loader' }
        //]
        // CSS抽離
          ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })
      },

      // 加載css
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },

      // 加載圖片
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1000,
          name: 'media/images/[name].[hash:7].[ext]'
        }
      },

      // 加載媒體文件
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/mp4/[name].[hash:7].[ext]'
        }
      },

      // 加載iconfont
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/iconfont/[name].[hash:7].[ext]'
        }
      }
    ]
  },

  // 配置插件
  plugins: [
    // 生成抽離文本文件插件的實例
    new ExtractTextPlugin({
      filename: (getPath)=>{
        return getPath('[name]@[chunkhash:6].css').replace('scripts', 'styles')
      },
      allChunks: true
    }),

    // 生成編譯HTML(index.html)的插件的實例
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['scripts/app']
    }),

    // 生成編譯HTML(search.html)的插件的實例
    new HtmlWebpackPlugin({
      template: './src/search.html',
      filename: 'search.html',
      chunks: ['scripts/search']
    }),

    // 代碼壓縮
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      }
    }),

    // 自動在打開瀏覽器打開頁面
    // new OpenBrowserPlugin({
    //   url: 'http://localhost:4000'
    // })
  ]
}

var devserver = { // 配置webserver
  devServer: {
    host: 'localhost',
    port: 4000,
    contentBase: __dirname + outputDir,
    noInfo: true,
    proxy: {
      '/api': {
        target: 'https://api.douban.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/vip': {
        target: 'http://localhost:9000/',
        changeOrigin: true,
        pathRewrite: {
          '^/vip': ''
        }
      }
    }
  }
}

if (process.env.NODE_ENV === 'dev') {
  module.exports = Object.assign({}, public, devserver)
} else {
  module.exports = public
}

坑

webpack1到webpack3的時候 loader加載格式更改
style-loader必須寫到fallback屬性上，版本1的時候直接loader:"style-loader!css-loader"
但願對你們有幫助！