webpack——一站到底一

webpack入门

webpack在逐渐成为一个成熟的青年路上，一直备受大家青睐，
然而还在不断的健身，希望以最好的姿态呈现给各位，如今他已经v3。
比起1 、2又强化骨骼，变得更坚实。    

一、什么是webpack

官方给出：

Webpack 是前端资源模块化管理和打包工具
他可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源
还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

个人理解：

首先，webpack其实就是前端工程的模块化打包工具
他可以把复杂的程序细化为细小的文件，然后在让各个模块进行加载
其次，天生支持commenjs，因为他就是在nodejs下开发的，但也支持AMD/CMD，方便旧代码的迁移
然后，他可以使得前端开发便捷，可以代替gulp/grunt(接下来会写到)，
比如打包压缩、启动server模块热替换、编译sass less 以及css的抽离、
mock数据、版本控制、devtool源码映射、以及开发、生产环境的切换
最后，webpack的扩展性强，插件机制完善，有效提高开发效率。

二、核心概念

• 入口 Entry
  页面中的入口文件，entry的值有三种类型：字符串、数组、对象

     1、字符串
         entry: './app.js'
     2、数组
         当存在多chrunks时，可以采用数组的形式，比如第三方库bootstrap
         {
           entry: ['./src/index.js', './vendors/bootstrap.js'],
           output: {
             path: './dist',
             filename: "index.js"
           }
         }
         会被打包到index.js中，但是数组的最后一个元素会被export
     3、对象
         设置多个打包的文件
             {   
                 entry: {   
                     index: './src/index.js',  
                     header: './src/header.js'   
                 } 
             }  

• 出口 Output

    指生成的文件要输出的目录， path、 filename
     output : {
         filename: '[name].js',
         path :__dirname + '/dev/scripts' //必须是绝对路径 __dirname 指的是当前config.js路径
     }
     如果加版本号的话
      filename ： '[name]@[chunk:6hash].js'
      注：版本号的配置有两种方法，我会单独写一篇文章来介绍。。。

• 加载器 Loader
  webpack本身只理解JavaScript，sass、css、html、jpg等文件需要loader进行处理，转换为模块
  常用的有:
  babel-loader

     用来编译es6+ 
     1、下载：npm i babel-core babel-loader babel-preset-env -D
     注意以前用的是：npm i babel-core babel-loader babel-preset-es2015 babel-preset-state-0
     2、需要在项目根目录创建.babelrc用来预设es6
     {
         "presets" : ["babel-preset-env"]
     }
     eg：
     3、{
         test: /\.js$/,
         exclude : /node_modules/,排除不必要的js解析
         use : [
             {
                 loader : 'babel-loader',//解析es6解析具体通过babel-core
             }
         ]
     },
     

  sass-loader、css-loader、style-loader
  下载：npm i css-loader style-loader -D //css loader

      npm i sass-loader node-sass -D  //编译成css
       eg:
       // 加载css
       {
         test: /\.css$/,
         use: [
           { loader: 'style-loader' },
           { loader: 'css-loader' },//执行的时候从下往上执行
          {loader : 'sass-loader'}
         ]
       }
       sass-loader是编译 sass文件为css文件，css-loader是编译css文件为字符串，
       最后 style-loader把css字符串打入html文件的style标签里，让页面能加载样式。

  url-loader
  下载：npm i url-loader -D

     图片、字体图标加载器，是对file-loader的上层封装,
     支持base64编码。传入的size（也有的写limit) 参数是告诉它图片如果不大于 25KB 的话要自动在它从属的 css 文件中转成 BASE64 字符串。
  file-loader: 
  下载：npm i file-loader -D 
      加载一些 媒体文件 字体图标等
      // 加载图片
       {
         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]'
         }
       }

  vue-loader

   下载：npm i vue-loader -D    加载vue组件

  postcss-loader

     css3加浏览器前缀

• 插件 Plugins

     插件可以帮助webpack进行输出文文件

  常用的插件有：
  (1) html-webpack-plugin 它会在src目录下自动生成一个index.html

     配置webpack.config.js中 
     var HtmlWebpackPlugin = require('html-webpack-plugin')
     在plugins : {
         //编译html
         new HtmlWebpackPlugin({
             template : './src/index.html', //源文件
             filename : 'index.html'//目标文件
         })
     }
     注：webpack怎么引入第三方的库 例如jquery
     entry: {
         page: 'path/to/page.js',
         jquery: 'node_modules/jquery/dist/jquery.min.js'
     }
     new HtmlWebpackPlugin({
         filename: 'index.html',
         template: 'index.html',
         inject: true,
         chunks: ['jquery', 'page'] // 按照先后顺序插入script标签
      })
  

  (2) autoprefixer 自动检测各个浏览器加个内核前缀的插件

    安装：cnpm install --save-dev autoprefixer postcss-loader
    配置：
    var autoprefixer = require('autoprefixer');
     loaders:[
         {
           test:/\.css$/,
           //在原有基础上加上一个postcss的loader就可以了
           loaders:['style-loader','css-loader','postcss-loader']
           }
       ]
   },
   postcss:[autoprefixer({browsers:['last 2 versions']})]

  (3) extract-text-webpack-plugin 将app.js里的css抽离成.css

   装包 npm i extract-text-webpack-plugin -D
   1、var ExtractTextPlugin = require("extract-text-webpack-plugin")
    2、 配置插件 在module中
     module : {
         ...
         plugins : [
             //new 插件的实例
             new ExtractTextPlugin({
                 filename : 'style/app.css'
             })
         ]
     }
    3、 对scss进行改造
     {
         test : /\.scss$/,
         use : [
             //css抽离
             ExtractTextPlugin.extract({
                 fallback :'style-loader',  //style-loader是把文本放到页面上
                 use : ['css-loader','sass-loader']  //从后往前执行
             })
         ] 
     }
     如果

  (4)webpack.optimize.UglifyJsPlugin 代码压缩
  内置核心插件 和 uglifyjs-webpack-plugin 这个插件一样

     var webpack = require('webpack')
     在plugins中
     plugin ： {
         ...
         new webpack.optimize.UglifyJsPlugin({
             compress{
                 warings:false    //去掉警告
             }, 
             output:{
                 comments:false 
             }
         })
     }

  (5) open-brower-webpack-plugin 自动在浏览器中打开页面 方便开发

     下载：npm i open-browser-webpack-plugin -D
     var OpenBrowser = require('open-brower-webpack-plugin')
  
     plugins : [
         ...
         new OpenBrowser({
             url ： 'http://localhost:4000'
         })
     ]

  (6) on-build-webpack 删除之前版本

     下载：npm install --save-dev on-build-webpack
     //webpack.config.js
     var WebpackOnBuildPlugin = require('on-build-webpack');
     var fs = require("fs");
     //设置为你的目标文件夹地址
     var buildDir = './dist/';
     ...
     plugin:[
         new WebpackOnBuildPlugin(function(stats) {
             const newlyCreatedAssets = stats.compilation.assets;
             const unlinked = [];
             fs.readdir(path.resolve(buildDir), (err, files) => {
               files.forEach(file => {
                 if (!newlyCreatedAssets[file]) {
                   fs.unlink(path.resolve(buildDir + file));
                   unlinked.push(file);
                 }
               });
               if (unlinked.length > 0) {
                 console.log('删除文件: ', unlinked);
               }
           });    
         })
     ]
  续...webpack二——一站到底