webpack学习笔记

1.第一种使用方法：命令行（没有配置文件）--把app.js打包成bundle.js

webpack app.js -o bundle.js

2.第二种使用方法：配置文件：

　　如果配置文件的名称不是webpack.config.js可以在命令行中修改（假设你的配置文件为webpack.conf.js）

webpack --config webpack.conf.js

3.es6文件的引入与导出

//引入
import sum from './sum'
//sum.js文件导出
export default function (a,b) {
    return a+b
}

4.common.js文件的引入与导出

//引入
var minus = require('./minus')
//minus.js文件导出
module.exports = function (a,b) {
    return a - b
}

5.AMD文件的引入与导出

//引入与使用
require (['./muti'],function (muti) {
    console.log('muti(2,3)=',muti(2,3))
})

//导出muti.js文件

define(function (require,factory) {   
        'use strict'                  
    return function (a,b) {           
              return a*b              
    }                                 
})                                    

 6.Es6的编译配置：当需要编译ES6语法的时候使用：

//安装
//最新版本
npm install babel-loader@8.0.0-beta.0 @babel-core
//普通版本
npm install --save-dev babel-loader babel-core
//只知道需要打包，但是还不知道用什么规范来打包，于是需要给loader指定一个规范；
//主要的规范有：
es2015
es2016
es2017
env
babel-preset-react
babel-preset-stage 0-3

　　presets的安装：

npm install @babel/preset-env --save-dev//最新
npm install babel-preset-env  --save-dev//普通

　　targets的相关配置：

targets
targets.browsers
targets.browsers:"last 2 versions"
targets.browsers:">1%"
browserslist
Can I use

 

　　loaders以及规范和targets的配置文件：

//webpack.config.js
module.exports = {
    entry:{
        app:'./app.js'
    },
    output:{
        filename:'[name].[hash:8].js'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                   loader: 'babel-loader',
                    options:{
                       presets:[
                           ['@babel/preset-env',{
                               targets:{
                                   // browsers:['>1%','last 2 versions']
                                   browsers:['last 2 versions']
                                   // chrome:'52'
                               }
                           }]//给babel指定presets
                       ]
                    }
                },
                exclude:'/node_modules/'
            }
        ]
    }
}

测试的es6代码：

let func = () =>{}
const NUM =45
let arr = [1,2,3]
let arrB = arr.map(item =>item*2)
console.log('new Set(arrB)',new Set(arrB))

命令行webpack:结果let 等被转化为var ，但是部分没有被转换：

一些函数和方法需要使用Babel Polyfill和Babel Runtime 

比如：

Generator
Set
Map
Array.from
Array.prototype.includes

Babel Polyfill:是一个全局垫片，为应用准备的，

安装：

npm install babel-polyfill --save

引入app.js文件

import "babel-polyfill"

Babel Runtime Transform:是一个局部垫片，为开发框架准备；

安装：

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save

配置文件：.babelrc:实际是一个json文件

{
  "presets":[
    [
      "@babel/preset-env",{
          "targets":{
                "browsers":["last 2 versions"]
          }
    }]
  ],
  "plugins":["@babel/transform-runtime"]
}

 7.在启动webpack时，需要给package.json添加配置：

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}