阶段1-第二章-webpack-基础(一)

webpack主要功能

• 代码转译
• 模块合并
• 混淆压缩
• 代码分割
• 自动刷新
• 代码校验
• 自动部署

项目中使用webpack

1.webpack 全局安装
npm i webpack webapck-cli -g
2.项目安装
npm i webpack webpack -cli -D
webpack
3 0配置打包 npx webpack

// commonJS 导出
module.exports={
name:'aaa'
}
// es6导出：
export default {
name:'aaa'
}

2.
 // --config 来指定配置文件，开发和上线不同的配置文件
npx webpack --config webpack.custom.config.js


在pacakge.json 里面的script 来指定webpack 打包的配置文件
"scripts":{  //npm run build  
    "buildcustom":"webpack --config webpack.custom.config.js"，
    "build":"webpack "，
    "watch":"webpack --watch"，
    "dev":"webpack-dev-server --contentBase src"
    }

3.开发时自动编译工具：
//  在webpack --watch
1.webpack's Watch Mode 监视模式,监视文件改变，自动打包生成输出文件
// webpack-dev-server 依赖webapck
2.npm i webpack-dev-server 
 //在index.html引入bundle.js
3.运行：
 npx webpack-dev-server
 原理：webpack-dev-server 会在本地起一个express服务，在内存里生成一个bundle.js，
 在根目录里面有个bundles.js
  参数：
   --compress   开启压缩 是express的http服务的技术
  --contentBase ./src  指定webpack-dev-serever 的express的根目录 入口为src
  --hot  指定为热加载，hot module replacement  简称：hmr热模块更替
  --port 5000  指定端口
  --open  自动打开浏览器

HMR: 热模块更替如果是在指令中不用添加，如果是在配置文件中使用是得安装
  webpack.HotModuleReplacementPlugin 插件，最新的webpak和webpack-cli不用手动安装了，自带了

2.3.3: html插件

html-webpack-plugin

1.devServer时，根据模板自动在express项目根目录下生成html（类似devServer生成内存中的bundle.js）
2.devServer时，自动引入bundle.js
3.打包是自动生成index.html

2.3.4 webpack-dev-middleware

简称：    webpack-dev-server      
  webpack-dev-middleware 是一个容器，它可以将webpack处理后的文件传递给一个server。
  webpack-dev-server 在内部使用了它，同时，他可以作为一个单独的包来使用，以便进行更多自定义设置

1.安装express和webpack-dev-middleware
2.新建server.js
//webpack-dev-server 内部做了这些封装
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');  //导入webpack配置文件
 const app = express();
 const compiler = webpack('config');
 
 app.use(webpackDevMiddleware(compiler,{
     publicPath:'/'   //将编译好的代码放在服务器的根目录
 }))

app.listen(3000,()=>{
 console.log('http://localhost:3000')
}) 


3.在package.json 配置scripts为"server": node server.js
4.运行 npm run server
注意：1.如果要使用middleware，必须使用html-webpack-plugin插件，否则html文件无法争取的输出到express服务器的根目录

2.3.5小结：

只有在开发时才需要自动编译工具，例如：webpack-dev-server
 项目上线时会直接使用webpack进行打包构建，不需要使用这些自动编译工具
 自动编译工具只是为了提高开发体验

2.5 处理saas/less

npm i less less-loader  -D
npm i node-sass sass-loader -D

2.6 处理图片和字体文件

npm i file-loader -D
npm i url-loader -D   url-loader 是基于file-loader,是对file-loader的包装 要使用url-loader必须安装file-loader的
url-loader做了处理：为了避免出现重名，做了hash操作，并且都放在根文件下面

2.7 处理js babel-loader 将新语法转换成老语法，基于webpack

1. npm i babel-loader   @babel/core(核心包)  @babel/preset-env（预设语法包）  webpack -D
2. 如果要支持更高级的ES6语法，可以继续安装插件：
   npm i @babel/plugin-proposal-class-properties -D
更多插件在Babel 官网查询

3.排除js
 exclude: /node_modules/

4
更高级的用法：generator  语法转换
  npm i   @babel/plugin-transform-runtime  --save-dev   开发依赖
  npm i @babel/runtime  --save  运行时依赖（开发上线都要用到的依赖）

setTimeout(funciton(){
    //如果是function内部，this直接指向window
    console.log('1s后我执行了')
},1000)

setIntervel(()=>{
    console.log('我是使用了箭头函数的setTimeout')
})

// es6 class 关键字  是原型的语法糖
class Person {
    this.name = name;
}
let xx = new Person('wang') 


  .babelrc(recommended);是一个json格式的配置,项目根目录下面创建.babelrc

{
    
                     "presets":["@babel/env"],
                     "plugins":[
                     "@babel/plugin-proposal-class-properties"，
                     "@babel/plugin-transform-runtime"
                     ]
}

@babel/polyfill 将es6转换es5

js是一门动态语言，在代码执行时可以随时为对象添加属性或方法
babel 在看到对象调用方法时，默认不会进行转换
像includes() 这样的新方法就不会转换
@babel/polyfill   es6新方法转换
npm i @babel/polyfill  --save
使用：
在main.js中使用
import '@babel/polyfill'


在webpack中使用：
module.exports = {
    entry:['@babel/polyfill',"./app/js"]
}

sourceMap 提高调试效率

sourceMap 原理是额外生成映射文件
eval  推荐使用；可以大幅提高持续构建的效率； 带eval 不会额外生成映射文件，在eval函数里面实现；在代码内部实现定位源代码
cheap 模式可以大幅提高source map生成的效率；开销比较小
使用module 可以支持babel 这种预编译工具，映射转换前的代码
eval-source-map  可以减少网络请求；这种模式开启DataUrl 本身包含sourcemap信息，并不需要像sourceUrl那样，浏览器需要发送一个完整的网络请求去获取sourcemap文件，这会略微提高点效率；而生产环境中则不宜使用eval，这样会让文件变得很大
开发环境推荐：
cheap-module-eval-source-map   推荐使用的一种模式
生产环境：
不使用sourcemap
devtools:'cheap-module-eval-source-map'   
生成后的文件 ：是babel转译后生成的一个一个的js文件
打包后的文件： 是webpack 将所以的js放到一个js文件放到一个文件

webpack 插件使用：

1.安装 
2.require引入 
3.在plugins中new这个插件的构造函数

clean-webpack-plugin

在npm run build 会自动清除dist目录

copy-webpack-plugin

可以拷贝多个源
使用插件，在pugins中插件对象并配置源和目标
from: 源，从哪里拷贝，可以是相对路径，可以是绝对路径，推荐绝对路径；
to: 目标，拷贝到哪里去，相对于output的输出路径，同样可以使用相对路径或绝对路径，但更推荐相对路径（直接算相对dist目录即可）
如果是图片，路径用绝对路径，/开头

bannerPlugin

这是一个webpack内置插件，用于给打包的js加上版权注释信息,为每个chunk文件头部添加banner;

上面插件用到的webpack配置

1.  入口：
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
module.exports={
 entry: './src/main.js',
 output:{
//必须为绝对路径
//path.resolve() 解析当前路径的绝对路径
// path.join(__dirname,'./dist/')
path: path.resolve("./dist/"),
filename: 'bundle.js'
},
  mode:'development'  //不设置默认为production ,
//  watch: true,   //开启监视模式，自动编译，生成输出文件
devServer:{
    open: true,
    port: 5000,
    hot: ture,
    compress: true,
    contentBase: '/src',   
    },
 plugins:[
 //插件一般引入进来是个构造函数
 //根据模板'/src/indtx.html'生成文件'index.html'
     new HtmlWebpackPlugin({
         filename:'index',
         template:'./src/index.html'
     }),
     new CleanWebpackPlugin(),
     new CopyWebpackPlugin([{
         from: path.join(__dirname,'assets'),
         to:'assets'
     },
     {
         from: path.join(__dirname,'image'),
         to:'image'
     }
     ]),
     new webpack.BannerPlugin('可以为每个chunk文件头部添加banner')

 ],
 module:{
     rules:[
         {
             test:/\.css$/,
             // webapck 读取loader时 是从左到右读取，会将css文件先交给最右侧的loader
             // loader的执行顺序是从右到左以管道的方式链式调用
             // css-loader：解析css，使其支持css语法格式
             // style-loader: 将解析出来的结果放到 html中，使其生效
             use:['style-loader','css-loader']
         }，
         {
             test:/\.less$/,
             //less-loader 只是将less文件转成css语法
             use:['style-loader','css-loader','less-loader']
         },
         {
             test:/\.s(a|c)ss$/,
             use:['style-loader','css-loader','sass-loader']
         },
         {
             test:/\.jpg|jpeg|png|gif|bmp$/,
             use:['file-loader']
         },
         {
             test:/\.(woff|woff2|eot|svg|ttf)$/,
             use:['file-loader']
         },
         {
             test:/\.(jpg|jpeg|png|gif|bmp)$/,
             use:{
                 loader:'url-loader',
                 options:{
      /* url-loader功能*/  limit:5*1024，   //5kb  如果图片大小  小于5kb直接转成base64
        /* file-loader功能*/  outputPath:'images',
       /* file-loader功能*/  name:[name]-aaa[hash:4].[ext]  //ext扩展名 -中间可以加常量,hash:4 保留4位hash值
                 }
             }
         }，
         {
             test:/\.js$/,
             use:{
                 loader:'babel-loader'，
                 options:[
                     presets:['@babel/env'],
                     plugins:[
                     '@babel/plugin-proposal-class-properties'，
                     '@babel/plugin-transform-runtime'
                     ]
                 ]
             },
             exclude:/node_modules/
         }
     ]
 },
 devtool:'cheap-module-eval-source-map'   
}

转载于:https://my.oschina.net/u/3150996/blog/3074773