webpack学习之路

技术胖：慢慢来，其实比较快
第一节课：
webpack的作用：
打包：可以把多个JS文件打包成一个文件，减少服务器压力和下载带宽；
转换：把拓展语言转换成普通的JS，让浏览器顺利运行；
优化：优化性能

npm install --save-dev webpack

这里的参数–save是要保存到package.json中，也就是把webapack的版本号保存在package中，因为webpack的全局安装会导致：局部安装和全局安装webpack版本号不同时，自动使用全局的webpack，所以在这里使用-save把全局的版本号存在局部，是一个必要的操作。dev是在开发时使用这个包，而生产环境中不使用。

第二节课：

webpack {entry file} {destination for bundled file}

把入口文件打包到bundle.js，
live-server已经取代http-server，实现热更新

第三节课：
新建webpack.config.js文件，配置打包

moudel.expors={
    entry:{ // 多入口文件
        entry: __dirname + '/app/main.js', // dirname获取绝对路径
        entry2: __dirname + '/app/main2.js'
    },
    output:{
        path: __dirname + "/dist", // 出口文件路径
        filename: [name].js // 打包文件名同入口文件设置名，如entry.js,entry2.js
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

配置入口出口成功后，打包直接输入webpack命令就可以完成打包工作

第四节：
竟然不免费了，胖胖说好最大的免费视频网站呢，说好的初衷不改呢，但是买卖不在仁义还在，视频看不了，下面的文档写的还是很详细的哈，看文档果然效率提高了好多。。。
主要讲devServer的配置：（四个基本的）

devServer:{
    //设置基本目录结构
    contentBase:__dirname,
    //服务器的IP地址，可以使用IP也可以使用localhost
    host:'localhost',
    //服务端压缩是否开启
    compress:true,
    //配置服务端口号
    port:1717
}

首先

npm install webpack-dev-server --save-dev

安装服务。然后配置npm（package.json）

"scripts": {
    "server":"webpack-dev-server"
 },

命令行输入npm run server热启动，实时更新
攻略上写的window系统会出现问题，不能实现热更新，反正我的电脑就是不好使

第五节：loader
加载css等需要通过loader解析，
这里需要手动下载loader
style-loader:
它是用来处理css文件中的url()等，npm中的网址：https://www.npmjs.com/package/style-loader

用npm install 进行项目安装：

npm install style-loader --save-dev

css-loader：
它是用来将css插入到页面的style标签。npm中的网址：https://www.npmjs.com/package/css-loader

用npm install 进行项目安装：

npm install --save-dev css-loader

这里就赤裸裸的抄袭了哈哈，
webpack.config.js

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

补充一下loader的配置项
test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use（loader）：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）。

第六节课：压缩JS代码
开发的JS代码正常是无需压缩的，在服务器上运行的JS代码才需要压缩，所以这个插件在开发的时候不会用到。
引入uglify

const uglify = require('uglifyjs-webpack-plugin');

并在plugins中引用

plugins:[
   new uglify()
],

第七讲：打包HTML文件
首先安装：

npm install --save-dev html-webpack-plugin

在webpack.config.js中引入：

const htmlPlugin= require('html-webpack-plugin');

在plugins中引用：

plugins:[
  new htmlPlugin({
        minify:{
            removeComments:true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        hash:true,
        template:'./src/index.html'
   })
],

minify：是对html文件进行压缩，removeComments是去掉注释，collapseWhitespace是合并空格，removeAttrubuteQuotes是却掉属性的双引号。
hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
template：是要打包的html模版路径和文件名称。

第八讲：图片处理
图片加载的问题出在，打包之后路径有变化，会导致解析错误。这里用到file-loader和url-loader，先安装：

npm install --save-dev file-loader url-loader

在module中配置：

module:{
    rules: [
        {
          test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ]
        },{
           test:/\.(png|jpg|gif)/ ,
           use:[{
               loader:'url-loader',
               options:{
                   limit:500000
               }
           }]
        }
      ]
},

这里test正则匹配文件格式，use中配置相应的处理loader，limit是把小于一定大小的文件打包成Base64的格式，写入JS，只有打包成Base64格式的图片能找到路径，所以也限制了不要把大图片打包，大图片传到服务器上直接引用比较方便一些。
无法打包的图片做背景引用方法
另外url-loader封装了file-loader

第九讲：css分离打包
照例先安装插件：

npm install --save-dev extract-text-webpack-plugin

requier引入

const extractTextPlugin = require("extract-text-webpack-plugin");

plugins中引用：

new extractTextPlugin("/css/index.css")

这里的路径是打包后的路径
module中对css的处理也需要作出修改：

module:{
 rules: [
        {
          test: /\.css$/,
          use: extractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
        },{
           test:/\.(png|jpg|gif)/ ,
           use:[{
               loader:'url-loader',
               options:{
                   limit:500000
               }
           }]
        }
      ]
},

css分离后，css中对应的图片路径问题也需要处理，这里在出口文件中增添配置：

var website ={
    publicPath:"http://127.0.0.1:1717/"
}

注意，这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。

//出口文件的配置项
output:{
    //输出的路径，用了Node语法
    path:path.resolve(__dirname,'dist'),
    //输出的文件名称
    filename:'[name].js',
    publicPath:website.publicPath
},

第十讲：less打包（sass同样）
先安装：

npm install --save-dev less
npm install --save-dev less-loader

配置loader：

{
    test: /\.less$/,
    use: [{
           loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        , {
            loader: "less-loader" // compiles Less to CSS
        }]
}

第十二讲：babel
安装：

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

配置：

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

第十三讲： source-map
在使用webpack时只要通过简单的devtool配置，webapck就会自动给我们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让我们调试起来更简单。

module.exports = {
  devtool: 'source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

第十四讲：第三方插件
需要先引入webpack

const webpack = require('webpack');

全局引入第三方插件

plugins:[
    new webpack.ProvidePlugin({
        $:"jquery"
    })
],

第十五讲：watch
实现自动打包，简单配置一下就可以

watchOptions:{
    //检测修改的时间，以毫秒为单位
    poll:1000, 
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
    aggregeateTimeout:500, 
    //不监听的目录
    ignored:/node_modules/, 
}

第十六讲：一些优化技巧
这个说起来可能说不完，所以我也没仔细学，用到的时候再来学习吧。
感谢技术胖，虽然我没有买你视频，但还是学到了很多，赋个链接把，算是交学费了
Webpack3.X版 成神之路
进阶学习：
webpack热更新原理
vue的官方脚手架vue-cli到底做了什么?