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")
  }
}   
但是页面必须引入
 
 

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