webpack篇，结合理论与实际，加以透彻分析！

Webpack篇

开始着手项目打包的一些东西，还不是特别懂，一边学习，一边作笔记好啦。

1.webpack的概念。
Webpack 是当下最热门的前端资源模块化管理和打包工具。任何形式的资源均可以视做模块，经过 loader 的转换。
2.webpakc的安装。
（1）在Node.js  用npm 全局安装Webpack：  npm install webpack -g
         经过webpack -h 测试。

（2）进入项目目录。经过npm init建立 package.json。安装webpack依赖 npm install webpack --save-dev。
         使用命令webpack + xx（须要打包的js名称） + xx（打包后的js名称）。使用动态表达式require绑定js文件，加载依赖。

（3）打包css ，首先须要先安装loader ： npm install css-loader style-loader --save-dev
         1.特别注意若是引用css的时候，打包须要在路径中添加css-loader！，在运用到页面中须要添加style-loader！。
         2.使用webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'语句就不须要在路径中引用那些loader了，在后面添加--watch进入监视者模式，--progress 能够看到打包过程，--display-modules 列出打包的模块，--display-reasons 列出打包的缘由。

3.webpack的配置文件。
（1）简历项目webpack来配置文件。首先建立目录。

src里面还分别建立script、style文件。来放置js文件跟css文件。
dist 存放打包好的js文件。
（2）系统会默认搜索webpack.config.js这个配置文件， 或者使用 webpack --config +xx（配置文件名）来指定配置文件。

//模块化输出

module.exports = {

//打包入口

 entry: './src/script/main.js',

 output: {

  //打包文件放在哪里

  path: './dist/js',

  //打包文件名

  filename: 'bundle.js'

 }

}

在有配置文件的状态下，只须要运行 webpack就能编译打包。
（3）若是须要加特别的参数来输出，须要在package.json文件里面配置。

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    //能够在这里添加你想要输出的命令。

    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

  },

使用 npm run webpack 编译。

（4）配置参数的详解
1.entry 表示入口文件的路径。它有三种写法针对不一样的状况。
         1.只写一个单一的路径：entry： ‘./路径/.xxx.js’’
         2.写一个数组： entry：【‘./路径/.xxx.js’，‘./路径/.xxx.js’’】（这个也只打包了一个文件）
         3.能够写 一个对象key 加 value的形式：注意这种写法须要修改 output.filename值才有效果。

entry: {

  page1: './page1',

  page2: ['./page2','./page3']

 }

2.output.filename 这里不要写绝对路径且不要写路径，只须要写文件名。
（1）若是entry入口文件有第三种状况的写法，须要更改filename的文件名。
（2）name 输出跟入口文件一样的文件名。
（3）hash 就是本次编译打包的hash值。（两个hash值是同样的）
（4）chunkhash  是系统的hash值，也能够理解为版本号，只有当文件修改了再打包的文件才会更新这个值。

3.插件。（更新html，由于每次打包好的js文件名是不必定的，因此html引用的js的名字不肯定，因此须要插件来解决这个问题。）
1.先案例一个插件推荐网站。插件推荐（随便百度的）（1）先使用命令安装插件 npm install html-webpack-plugin --save-dev.
（2）在配置文件中引用：var htmlWebpackPlugin = require（‘html-webpack-plugin’）。
（3）在配置文件中添加一个属性：

plugins: [

  new htmlWebpackPlugin({

  //若是不加参数只是生成一个新的html文件。

  //设置模版

  template: 'index.html',

  //更改html的名字，跟更改打包文件名相同。

  filename: 'index-[hash].html',

  //还能够制定生成的脚本放在那个地方

  inject: 'head'

  })

 ]

context：上下文选项用来决定根目录（既绝对路径）的入口文件。

（4）更复杂的功能。把plugins里添加的属性显示到html文件中。
         在html文件中写相似js模版语言，须要用<%= %>的格式包裹起来。若是是编写js代码的话就不须要中间的= 号。
         搜索到一个每个属性详细的配置，须要的能够过来看看html-webpack-plugin         1.既然能用代码的形式拿到数据，知道告终构，那么换一种方式就能够用模版语言的方式引用js文件。
            在html标签里面要用 <%= htmlWebpackPlugin.options.xx(这里写属性) %> 另外，须要打印属性跟值的时候加上JSON.stringify解析成字符串。
         2.在output.publicPath：这里能够写上线的地址前缀。
         3.多应用的页面处理。
           （1）在entry添加多个入口文件。
           （2）新建相同个数的new htmlWebpackPlugin，设置不一样的文件。
           （3）为了解决生成的html载入对应的js文件，可使用两种方法：
                     1.使用chunks浏览器传参的方式：chunks：【‘a’】。
                     2.使用excludeChunks排除串口的方式：excludeChunks：【‘b’，‘c’】。
           （4）减小http请求，把js初始化代码直接写到页面中。
                   1.htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)获取的值没有publicPath值。
                   2.拿到这个值以后使用webpack官方给的api  compilation.assets[包裹获取的值].source() 这样就获取的不是地址，而是js内容了。
                   3.使用模版语言判断引用js。
                   4.特别注意inject是开启是否自动生成<script>标签。excludeChunks排除串口在 <script>模块生成也能能起到一个筛选的做用。

（5）loader。
1.loader 的三种配置方式。
        1.loader in require 直接 在require文件的时候在路径中添加对应的loader。
        2.CLI  在编译的的语法中添加 --module-bind + 对应的loader。
        3.Configuraion 在配置文件中添加一个数组，添加对于的loader。
2.Configuraion 配置步骤。
1.先在Babel安装好babel-loader。npm install --save-dev babel-loader babel-core
2.配置presets属性，转换为Latest（包含es2015、2016、2017），安装Latest插件。

//配置loader

 module: {

  loaders: [

  {

  //匹配以js结尾的文件

  test: /\.js$/,

  //使用babel-loader

  loader: 'babel',

            //为了解决加载速度的问题，能够排除不要扫描的文件夹

  exclude: './node_modules',

  //有时候排除了也没法解决问题，那就只能指定文件夹

  include: './src/',

//若是上面的两个方法也没效果，使用node的方法指定绝对路径。

//1.引用node的api ，var path = require('path');

//2.exclude: path.resolve(__dirname , 'node_modules'),include: path.resolve(__dirname , 'src'),

  //用query参数指定插件解析js。

  query: {

  //解析js的特效 安装latest  npm install --save-dev babel-preset-latest

  presets: ['latest']

  }

  }

  ]

 },

3.使用配置文件loader css。
*npm 官网 npm（1）打包自动对css作处理，安装postcss-loader后处理器  npm install postcss-loader --save-dev
         npm install autoprefixer --save-dev 添加css浏览器前缀。
（2）直接添加新的对象，配置。若是有css文件中import其余css，修改为css-loader?importLoaders=1就行了。
（3）安装less npm i less   安装less-loader npm i less-loader --save-dev sass同理，若是有import文件，不须要作处理。

4.使用配置文件loader 模版文件。
（1）无论是哪一种模版先要下载对应的loader：npm install html-loader --save-dev。
（2）在配置文件loaders中作对应的设置。
（3）ejs 跟tpl格式是相同的。

5.图片的配置。
（1）安装file-loader打包图片，无论是css仍是原HTML都会打包成功，注意若是是模版打包绝对路径没有问题，相对路径须要处理<img src="${ require('../../assets/head.jpg') }">
（2）安装url-loader。

{

  test: /\.(jpg|png|gif)$/i,

  loader: 'url-loader',

  query: {

  //设置一个值，若是大于这个值已原来的格式打包，小于则打包成best64的图片。

  //best64的图片每一张都是独立的，因此致使js、html文件变得很大，正常的图片的好处就是会有缓存。

  limit: 40000,

  //路径/ 名字/ hash/ 后缀名

  name: 'assets/[name]-[hash]-[ext]'

  }

  }

（3）压缩图片image-webpack-loader 建议跟file-loader 或者 url-loader搭配使用。

{

  test: /\.(jpg|png|gif)$/i,

  loaders: [

  //简写，能够把写成一个请求的方式。

  'url-loader?limit=2000&name=assets/[name]-[hash:5].[ext]',

  'image-webpack-loader'

  ]

  }

还有不少其余图片的配置，详情见npm官网。