webpack浅析

前端的工程化和自动化

grunt gulp browserify webpack
当今主流 webpack vue react angular
当前市面
2 个版本 webpack 3.0 webpack 4.0
webpack 4

一、webpack 基础认识

1. 官网地址
   官网: https://webpack.js.org/
   中文: https://www.webpackjs.com/
   前身: browserify
   缺点，只能转化js

2. webpack作用?

   干嘛的: 项目管理、打包、模块管理(依赖问题)、加载资源(js/css/html/png…/woff/data/vue…),转换器(loader)

   前身：grunt/gulp/browserify->webpack->pratcle

3. webpack的历史
   webpack1支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。
   webpack2 支持ES Module，分析ESModule之间的依赖关系，webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking
   webpack3 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；
   前端的模块化 AMD : require.js CMD : sea.js( 弃用了 ) COMMON.js ： node.js

4. 环境支持： Node 8

5. 安装：

   全局 npm i webpack webpack-cli -g
cnpm i webpack webpack-cli -g
yarn add webpack webpack-cli global
   cli 命令行工具 打包会依赖cli
   本地（项目目录）
   npm i webpack webpack-cli --save-dev 开发依赖
   项目： 优先找本地 > 全局

6. 概念：
   webpack是一种静态编译工具(预编译) 我们主要研究： 入口文件、出口、转换器、插件

二、webpack–打包

development：开发环境
production； 生产环境
开发环境 程序员而言， 依赖服务器环境来做
webpack --mode development 会自动找src/index.js 到 dist/main.js
要求设置开发模式|生产模式
webpack 入口地址 --mode development 指定出口

webpack aa/index.js --mode development  bb/index.js  自定义

环境分离
development:
a.浏览器调试工具
b.注释、开发阶段的详细错误日志和提示
c.快速和优化的增量构建机制
production:
a.开启所有的优化代码
b.更小的main大小
c.去除掉只在开发阶段运行的代码
d.Scope hoisting(作用域提升)和Tree-shaking(打包的结构只包含实际用到的 exports)

三、webpack----自动解决依赖:

原理：Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 main.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 main.js 中的代码，其它模块会在运行 require 的时候再执行。

四、webpack - loader：

webpack默认只支持javascript文件(默认)

• 其他文件(CSS/LEASS/…) 需要用加载器(loader)

loader: 类似一种转化器， 它可以把一个东西，转成另一个
需要下载 style-loader(读取到的css文件插到页面) css-loader(读取css文件)
下载: npm install style-loader css-loader -D
require(‘style-loader!css-loader!./xx.css’)

五、配置:

webpack配置有两种类型
单页面配置
入口文件只有一个
多页面配置
入口文件有多个

单页面配置：
webpack.config.js 是一个nodejs
作用: 配置一些webpack需要入口、出口、loader、Chunk代码块、Plugin扩展插件、Module模块

编写：

 		       module.exports={
 		           entry:'./src/index.js'    入口文件
 		           output:{ 默认输出到dist
 		               path:path.resolve(__dirname,'dist')//指定编译目录  不写默认指定到dist
 		               filename:'js/boundle.js'//以编译目录为根的出口文件路径
 		           },
 		           module: {
 		               rules:[
 		                   {test:'/\.css$/',use:['style-loader','css-loader']}
 		               ]
 		           },
 		           mode:'development' | production 区别环境
 		       }

多入口(多页面配置)

      entry: 入口接收string | json
          {app:'index1.js',app2:'index2.js'} 输出要求多输出
      output: {
          path:path.resolve(__dirname,'dist') //指定编译目录
          publicPath:'dist', //指定虚拟目录 不写指向编译目录，html引入js时，必填
          filename:'bundle.js' 单文件输出 | '[name].js' 多输出  html引入app和app2 配合
      }

webpack 开发环境下编译(打包到bundle.js)
webpack -p 生产环境下编译(打包到bundle.js,并压缩)
webpack -w 监听文件改动,自动编译,不用每次运行,但不会自动刷新浏览器

六、webpack --前端服务器–webpack-dev-server

http-server / server / webpack-dev-server 第三方服务包

需要自动刷新： webServer 搭建前端开发服务器
cnpm install webpack-dev-server -g | -D
参数:
命令行
webpack-dev-server --port 8088 --open --mode development

   写到webpack.config.js配置文件:

   devServer: {//和module同级
       port: 8088,
       open:true
   }

   终端运行方式2: webpack-dev-server

把运行命令放到package.json文件: devServer可以不要了
“scripts”:{
“dev”: “webpack-dev-server --port 8088 --open”
}

   终端: npm run dev

七、webpack—优雅降级

babel使用: ES6->ES5 tracuer babel

低版本： npm install babel-loader babel-core babel-preset-es2015 -D
高版本： npm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

做个js文件模块，测试导出引入

导出模块:
export default {}

引入模块:
import 名字 from 模块名

配置babel预设:

   module>rules> + {}
     {
       test:/\.js$/,
       exclude:/node_modules/, 排除
       use:[{
         loader:'babel-loader',
         options:{
           presets:['@babel/preset-env']
         }
       }]
     }

八、webpack — 省略引入文件名后缀

  // 配置webpack.config.js
   resolve: {     //与module同级
       extensions: [ '.js', '.css', '.json', '.jsx']
   }
   require('./style')// 可以省略后缀名

九、webpack — 产出html

webpack  webpack-dev-server webpack-cli  本地的

npm i html-webpack-plugin ---save-dev

   const HtmlWebpackPlugin = require('html-webpack-plugin')

   plugins:[
           new HtmlWebpackPlugin({
               template: './index.html',
                filename: './index.html',//默认到output目录
               hash:true,//防止缓存,会给文件后面加入hash
               minify:{
                   removeAttributeQuotes:true//压缩 去掉引号
               }
           })
   ]

   publicPath: '/', 指定虚拟目录为空，因为index进入到dist目录里了，不在外面了

   filename: 'js/[name].js',

十、css抽离（代码分离）

yarn add extract-text-webpack-plugin@next --dev

npm i extract-text-webpack-plugin@next --save-dev | -D
//@next 兼容webpack4 未来会不需要

   const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")

    //loader配置：
   use: ExtractTextWebapckPlugin.extract({
         use: 'css-loader'
       }) //不再需要style-loader

    //pulgin配置
   new ExtractTextWebapckPlugin('css/[name][hash:6].css')

十一、图片打包

yarn add url-loader file-loader --dev

npm I url-loader file-loader --save-dev

    //url-loader 存base64  file-loader存文件（woff mp3）
   {
       test:/\.(png|jpg|gif)/,
       use:[{
         loader: 'url-loader',
         options: {
           limit: 5000,//字节少于5000 ——》 base64  超过5000  file
           outputPath: 'images/', 5000意思存到images
         }
       }]
     }

//css中引入 | js动态(模块化) 引入

十二、资源copy：

静态资源(js，数据图片，json) 生产环境

npm i copy-webpack-plugin -D

    const CopyWebpackPlugin = require('copy-webpack-plugin')
//plugin配置
   new CopyWebpackPlugin([
     { from: path.resolve(__dirname,'static'), to: path.resolve(__dirname,'build/static') }
   ])

十三、配置文件拆分

webpack.config -> webpack.config.dev|prod
“dev”: “webpack --mode development --config config/webpack.config.dev.js”,
“build”: “webpack --mode production --config config/webpack.config.prod.js”,
“server”: “webpack-dev-server --mode development --config config/webpack.config.dev.js”

十四、

devtool: ‘source-map’
制定报错信息的源