webpack使用

webpack

概述

1、webpack 是一个现代JavaScript应用程序的模块打包器（特点：module、 bundler）
2、webpack 是一个模块化方案 （预编译）
3、webpack 获取具有依赖关系的模块，病生成表示这些模块的静态资源；
4、webpack 将带有依赖的各个模块打包处理后，变成了独立的浏览器能够识别的文件；
5、webpack 合并以及解析带有依赖项的模块；
6、webpack解决了现存模块打包器的两个痛点：

1. Code Spliting 代码分离，按需加载；
2. 静态资源的模块化处理方案；

四个核心概念

有：
入口(entry)、输出(output)、加载器(loader)、插件(plugins)

对比
模块化方案: webpack 和 requirejs（通过编写代码的方式将前端的功能，划分成独立的模块）

browserify 是与 webpack 相似的模块化打包工具

webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack)
requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 )

安装webpack

• 全局安装：
  npm install -g webapck
  目的：在任何目录中通过CLI使用webpack这个命令；

• 项目安装：
  npm install -D webpack
  目的：执行当前项目的构建；

webapck配置

• package.json配置方式
  安装：** npm install -D webpack-dev-server**
  作用：配合webpack,创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率；
  注意：无法直接在终端中执行 webpack-dev-server,需要通过package.json的script实现；
  使用方式： npm run dev
  
• webpack.config.js配置方式
  
• html-webpack-plugin 插件
  1、安装：npm install -D html-webpack-plugin
  2、作用：根据模板，自动生成html页面；
  3、优势：页面存储在内存中，自动引入bundle.js、css等文件；
  

babel使用

.babel的作用：

• 语法装换： 将新的ES语法转换成为浏览器能识别的语法(babel-preset-*)；
• polyfill浏览器兼容：让低版本浏览器兼容最新版ES的API;

安装：npm install -D babel-core babel-loader
安装：npm install -D babel-preset-env

基本使用（两步）

1、引入

2、在项目根目录中新建.babelrc配置文件

• .babel-preset-*
  作用：将新的ES语法转化为浏览器能识别的ES5代码；
  1、Babel通过语法转换器，能够支持最新版本的JavaScript语法；
  2、babel-preset-*用来指定我们书写的是什么版本的JS代码；
  3、babel-preset-es2015：转换es6的语法；
  4、babel-preset-stage-0：转换比es6更新的语法；

• babel-polyfill 和 transform-runtime
  作用：实现浏览器对不支持API的兼容（兼容旧环境、填补）
  在低版本浏览器中使用高级的ES6或ES7的方法或函数，比如：‘abc’.padStart(10)

• .babel/runtime的作用：
  1、提取辅助函数：ES6转码时，babel会需要一些辅助函数，例如_extend。babel默认会将这些辅助函数内联到每个JS文件里，babel提供了transform-runtime来将这些辅助函数“搬”到一个单独的模块babel-runtime中，这样做能减小项目文件的大小。
  2、提供polyfill：不会污染全局作用域，但是不支持实例方法如：Array.includes;

• .transform-runtime的作用：
  1、.babel-runtime更像是分散的polyfill模块，需要在各自的模块里面单独引入，借助transform-runtime插件来自动化处理这一切，也就是说你不要在文件开头import相关的polyfill,你只需使用，transform-runtime会帮你引入；

• .babel-polyfill：会污染全局作用域，如引入Array.protorype.includes修改了Array的原型，除此外还有String等；

方式一、
polyfill：
npm install -S babel-polyfill
方式二、
transform-runtime：
npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime

注意：babel-runtime包中的代码会被打包到你的代码中

区别：
polyfill 所有兼容性问题，都可以通过polyfill解决（包括：实例方法）、污染全局环境
runtime  除了实例方法以外，其他兼容新问题都能解决、不污染全局环境

polyfill：如果想要支持全局对象（比如：`Promise`）、静态方法（比如：`Object.assign`）或者**实例方法**（比如：`String.prototype.padStart`）等，那么就需要使用`babel-polyfill`

babel-runtime ：提供了兼容旧环境的函数，使用的时候，需要我们自己手动引入
  比如： const Promise = require('babel-runtime/core-js/promise')
  存在的问题：
    1 手动引入太繁琐
    2 多个文件引入同一个helper（定义），造成代码重复，增加代码体积
babel-plugin-transform-runtime：
    1 自动引入helper（比如，上面引入的 Promise）
    2 babel-runtime提供helper定义，引入这个helper即可使用，避免重复
    3 依赖于 babel-runtime 插件

transform-runtime插件的使用：
  直接在 .bablerc 文件中，添加一个 plugins 的配置项即可！！！
  "plugins": [
    "transform-runtime"
  ]
/*
  babel-polyfill 的使用步骤：
  1 main.js
*/
// 第一行引入
require("babel-polyfill")

var s = 'abc'.padStart(4)
console.log(s)


// 2 webpack.config.js 配置
module.exports = {
  entry: ['babel-polyfill', './js/main.js']
}

• 总结
  

Webpack 发布项目

1、webpack 命令能够生成dist目录到磁盘中，把打包后的diam，部署服务器中去；
2、webpack-dev-server 仅是在内存中生成的文件，并没有写到磁盘中，所有，只能在开发期间使用；

创建项目发布配置文件

• 开发期间配置文件：webpack.config.js
• 项目发布配置文件：webpack.prod.js (文件名称非固定production 生产环境)；
• 命令：webpack --config webpack.prod.js 指定配置文件名运行webpack；
• 参数：–display-error-details 用于显示webpack打包的错误信息；

/* package.json */

"scripts": {
  "build": "webpack --config webpack.prod.js"
}
1 在项目根目录中创建 webpack.prod.js 文件
2 在 package.json 中, 配置一个 scripts
3 在 终端中 通过 npm run build 对项目进行打包

打包处理过程

1 删除掉 devServer 相关的配置项
2 将图片和字体文件输出到指定的文件夹中
3 自动删除dist目录
4 分离第三方包（将使用的vue等第三方包抽离到 vender.js 中）
5 压缩混淆JS 以及 指定生成环境
6 抽取和压缩CSS文件
7 压缩HTML页面
8 配合vue的异步组件，实现按需加载功能

处理图片路径

注意：如果limit小于比图片大，那么图片将转化为base62编码格式；

• name参数介绍

/* webpack.prod.js */
// 处理URL路径的loader

{
  test: /\.(jpg|png|gif|bmp|jpeg)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 8192,
      name: 'images/[hash:7].[ext]' // 作用：将图片输出到images文件夹中，文件名采用7位的哈希值（MD5），并且保持原来的图片文件扩展名

      // name：指定文件输出路径和输出文件命令规则
      // [hash:7]：表示使用7位哈希值代表文件名称
      // [ext]：表示保持文件原有后缀名
      // name: 'imgs/img-[hash:7].[ext]'
    }
  }
},

自动删除dist目录

作用：每次打包之前，删除上一次打包的dist目录；

• 安装：npm install -D clean-webpack-plugin

/* webpack.prod.js */
const cleanWebpackPlugin = require('clean-webpack-plugin')

plugins: [
  // 创建一个删除文件夹的插件，删除dist目录
  new cleanWebpackPlugin(['./dist'])
]

分离第三方包

• 目的：将公共的第三方包，抽离为一个单独的包文件，这样防止重复打包！

• 例如：main.js、router、vuex中都引入了vue，不分离的话，vue会被打包3次；
  抽离后，vue文件只会被打包一次，用到的地方仅仅是引用；

/* webpack.prod.js */

// 1 入口 -- 打包文件的入口
entry: {
  // 项目代码入口
  app: path.join(__dirname, './src/js/main.js'),
  // 第三方包入口
  vendor: ['vue', 'vue-router', 'axios']
},

output: {
  // 2 修改输出文件路径和命名规则
  filename: 'js/[name].[chunkhash].js',
},

plugins: [
  // 3 抽离第三方包
  new webpack.optimize.CommonsChunkPlugin({
    // 将 entry 中指定的 ['vue', 'vue-router', 'axios'] 打包到名为 vendor 的js文件中
    // 第三方包入口名称，对应 entry 中的 vendor 属性
    name: 'vendor',
  }),
]

抽取和压缩CSS文件

• 安装：抽离 npm install -D extract-webpack-plugin
• 安装：压缩 npm install -D optimize-css-assets-webpack-plugin

压缩和抽离CSS报错的说明：
Error processing file: css/style.css
postcss-svgo: Error in parsing SVG: Unquoted attribute value

原因：压缩和抽离CSS的插件中只允许 SVG 使用双引号
/* webpack.prod.js */

// 分离 css 到独立的文件中
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 压缩 css 资源文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// bug描述: 生成后面的css文件中图片路径错误，打开页面找不到图片
// 解决：google搜索 webpack css loader 样式图片路径
output: {
  // ...

  // https://doc.webpack-china.org/configuration/output/#output-publicpath
  // 设置公共路径
  publicPath: '/',
},

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader', 'sass-loader']
      })
    },
  ]
},
plugins: [
  // 通过插件抽离 css (参数)
  new ExtractTextPlugin("css/style.css"),
  // 抽离css 的辅助压缩插件
  new OptimizeCssAssetsPlugin()
]

vue配合webpack实现路由按需加载

步骤：

• 修改组件的引用方式

// 方式一: require.ensure()
const NewsList = r => require.ensure([], () => r(require('../components/news/newslist.vue')), 'news')

// 方式二: import() -- 推荐
// 注意：/* webpackChunkName: "newsinfo" */ 是一个特殊的语法，表示生成js文件的名称
const NewsInfo = () => import(/* webpackChunkName: "newsinfo" */ '../components/news/newsinfo.vue')

• 修改webpack配置文件的output

output: {
  // ------添加 chunkFilename, 指定输出js文件的名称------
  chunkFilename: 'js/[name].[chunkhash].js',
},

请多多指教~!