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中针对环境进行判断 打包
 

三、安装

npm i webpack -g

四、配置

webpack.config.js,同gulpfile.js和Gruntfile.js一样，就是配置项 

五、可实施的配置

// 引入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"
希望对大家有帮助！