webpack babel

ES6模块化，浏览器暂不支持

ES6语法，浏览器不完全支持

压缩代码 整合代码 以让网页加载更快

node-v
//查看node版本

npm init -y

npm install webpack webpack-cli -D
借助淘宝镜像

建一个配置文件 webpack.config.js
const path = require(‘path’)
module.exports ={

    mode:'development' // production
    entry:path.join(__dirname,'src',‘index.js)//__dirname当前目录 src/index.js是整个文件的入口
    output:{
        filename:'bundle.js'
        path:path.join(__dirname,'dist')//目录，dist是文件夹
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'src',‘index.js)//找到以后的index.html
            filename:'index.html'//产出的index.html

        })
    ]，
    devServer:{
        port:3000,//定义端口
        contentBase:path.join(__dirname,'dist')//当前目录，devSever是启动本地服务
    }
}

在package.json中加入

{    
    "name":"webpack-demo",
    "version":"1.0.1",
    "description":"index.js",
    "main":"index.js",
    "scripts":{
        "test":"echo \"Error: no test specified\\ && exit 1",
        "build":"webpack -- config webpack.config.js",
        "dev"："webpack-dev-server"
    },
    "keywords":[],
    "author":"",
    "license":"ISC",
    "devDependencies":{
        "wepack":"^4.41.0",
        "webpack-cli":"^3.3.9"
    }
}

npm run build

如果是production模式，bundle.js会被压缩的比较小一点，development模式没有压缩，方便调试

建立网页，再安装一个插件

npm install html-webpack-plugin -D

npm run dev

如何配置babel

写一个ES6语法

const sum = (a,b)=>{
     return a +b
}
const res = sum(10,20)
conole.log(res)

用babel进行ES6编译

npm install @babel/core @babel/preset-env babel-loader -D

新建.babelrc文件

{
    "presets":["@babel/preset-env"]
}

在webpack.config.js进行配置

const path = require('path')
  module.exports ={

      mode:'development' // production
      entry:path.join(__dirname,'src',‘index.js)//__dirname当前目录 src/index.js是整个文件的入口
      output:{
          filename:'bundle.js'
          path:path.join(__dirname,'dist')//目录，dist是文件夹
      },
      module:{
          rules:[
              {
                  test:/\.js$/,
                  loader:['babel-loader'];
                  include:path.join(__dirname,'src'),
                  exclude:/node_modues/

              }
          ]
      }
      plugins:[
          new HtmlWebpackPlugin({
              template:path.join(__dirname,'src',‘index.js)//找到以后的index.html
              filename:'index.html'//产出的index.html

          })
      ]，
      devServer:{
          port:3000,//定义端口
          contentBase:path.join(__dirname,'dist')//当前目录，devSever是启动本地服务
      }
  }

ES6模块化规范是什么

export function fn(){
    console.log('fn')
}

export const name ='a'
export const obj ={
    name:'james'
}

如何导入

import {fn,name,obj} from './xxx'  //解构赋值的语法

fn()
console.log(name)
console.log(obj)

另外一种

    function fn(){
    console.log('fn')
}

const name ='a'
 const obj ={
    name:'james'
}

export{
    fn,
    name,
    obj
}

第三种
const obj={
name:’xxx’
}
export default obj //只导出一个，用import 获取，就用default

导入
import obj from ‘/…’

如何配置webpack生产环境

新建webpack.prod.js

copy webpack.config.js，再进行如下修改

      const path = require('path')
module.exports ={

    mode:'production' // 
    entry:path.join(__dirname,'src',‘index.js)//__dirname当前目录 src/index.js是整个文件的入口
    output:{
        filename:'bundle.[contenthash].js'
        path:path.join(__dirname,'dist')//目录，dist是文件夹
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                loader:['babel-loader'];
                include:path.join(__dirname,'src'),
                exclude:/node_modues/

            }
        ]
    }
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'src',‘index.js)//找到以后的index.html
            filename:'index.html'//产出的index.html

        })
    ]，

}

修改package.json

{    
    "name":"webpack-demo",
    "version":"1.0.1",
    "description":"index.js",
    "main":"index.js",
    "scripts":{
        "test":"echo \"Error: no test specified\\ && exit 1",
        "build":"webpack -- config webpack.prod.js",
        "dev"："webpack-dev-server"
    },
    "keywords":[],
    "author":"",
    "license":"ISC",
    "devDependencies":{
        "wepack":"^4.41.0",
        "webpack-cli":"^3.3.9"
    }
}

增加hash值的原因是能够更快的命中html缓存，能够加载更快