WebPack工作原理

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

这段话有三个重点：

打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。

转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任

1、webpack的基本配置

1.1、entry（项目入口，打包的入口文件，一个字符串或者一个对象）：entry:"./src/index.js"

1.2、output（出口文件，配置打包的结果，一个对象）：

output:{
　　filename: "build.js"
}

1.3、module（模块的处理）：loader的配置主要在module.rules中进行，例如：

module: {
　　rules:[{
　　　　test: /(\.jsx|\.js)/,  //表示匹配规则，是一个正则表达式
　　　　use:{   　　　　 //表示针对匹配文件将使用处理的loader
　　　　　　loader: "babel-loader",　　
　　　　　　options: {
　　　　　　　　presets: ["es2015", "react"]
　　　　　　}
　　　　}
　　}]
}

1.4、plugin（loader不能做的处理都能交给plugin来做），例如：

const CleanWebpackPlugin = require("clean-webpack-plugin")

{
　　plugin:[
　　　　new webpack.DefinePlugin({
　　　　　　"process.env" : {
　　　　　　　　NODE_ENV: JSON.stringify("production")
　　　　　　}
　　　　}),
　　　　new CleanWebpackPlugin(["js"], {
　　　　　　root: __dirname + "/stu/",
　　　　　　verbose: true,
　　　　　　dry: false
　　　　})
　　]
}

1.5、其它常用属性：

devtool:打包后的代码和原始代码存在较大的差异，此选项控制是否生成以及如何生成sourcemap

devserver：通过配置devserver选项，可以开启一个本地服务器（通常在这里配置跨域）

devServer: {
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/',
        pathRewrite: {'^/api' : ''},
        changeOrigin: true,     // target是域名的话，需要这个参数，
        secure: false,          // 设置支持https协议的代理
      }
    }
  }

watch：启用watch模式后，webpack将持续监听热河已经解析文件的更改，开发是开启会很方便

watchoption：用来定制watch模式的选项

performance：打包后命令行如何展示性能提示，如果超过某个大小是警告还是报错

1.6、webpack打包优化常用配置：

1.6.1、减小打包体积：

使用CommonsChunkPlugin分离第三方包

entry: {
    vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // 第三方文件
    app: './src/main.js'
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor", // 当加载 vendor 中的资源的时候，把这些资源都合并到 vendor.js 文件中
        filename: "js/vendor.js",
        minChunks: Infinity,
    })
],

或者使用externals进行cdn网络托管：

// index.html页面中引入
  <script src="https://cdn.bootcss.com/react/15.0.0/react-with-addons.min.js"></script>
  <script src="https://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
  <script src="https://cdn.bootcss.com/react-router/3.0.0/ReactRouter.min.js"></script>
  <script src="https://cdn.bootcss.com/redux/3.6.0/redux.min.js"></script>
  <script src="https://cdn.bootcss.com/react-redux/5.0.1/react-redux.min.js"></script>
  <script src="https://cdn.bootcss.com/history/4.5.0/history.min.js"></script>
// webpack中配置
externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter',
    'redux': 'Redux',
    'history': 'History'
},

// vue.config.js
  configureWebpack:{
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter'
    },
  }

1.6.2、小图片优化，使用url-loader，将小图转成base64，防止小图太多请求次数太多

npm install -D url-loader

module: {
    rules: [{
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
        loader: 'url-loader', // 优化小图片过多造成请求数太多
        options: {
            limit: 8192, // 如果图片小于 8192 bytes 就直接 base64 内置到模板，否则才拷贝
            outputPath: 'img/'
        } 
    }]
},

1.6.3、压缩css、js和html：

// 压缩css
 rules: [
     {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
         fallback: "style-loader",
         //这个地方配置一个对象，添加一个属性进行压缩css文件
         use: {
             loader: 'css-loader',
             options: {
                 minimize: true   // 配置minimize 值为true，压缩css 文件
             }
         }
     })
 },
 
// 压缩js
/*下载*/ npm install -D uglifyjs-webpack-plugin
/*引入*/ const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
/*配置*/
plugins: [
    new UglifyJsPlugin(), // 压缩 JavaScript
],

//压缩html
/*下载*/ npm   install  -D   html-webpack-plugin
/*引入*/ const HtmlWebpackPlugin = require('html-webpack-plugin')
/*配置*/
plugins: [
    new HtmlWebpackPlugin({
        template: './index.html', // 把 index.html 也打包到 dist 目录中
        // 压缩 html，默认 false 不压缩
        minify: {
            collapseWhitespace: true, // 去除回车换行符以及多余空格
            removeComments: true, // 删除注释
        }
    }), 
],