webpack学习笔记

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

1 webpack app.js -o bundle.js

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

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

webpack --config webpack.conf.js

3.es6文件的引入与导出

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

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

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

5.AMD文件的引入与导出

 1 //引入与使用
 2 require (['./muti'],function (muti) {
 3     console.log('muti(2,3)=',muti(2,3))
 4 })
 5 
 6 //导出muti.js文件
 7 
 8 define(function (require,factory) {   
 9         'use strict'                  
10     return function (a,b) {           
11               return a*b              
12     }                                 
13 })                                    

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的安装：

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

　　targets的相关配置：

1 targets
2 targets.browsers
3 targets.browsers:"last 2 versions"
4 targets.browsers:">1%"
5 browserslist
6 Can I use

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

 1 //webpack.config.js
 2 module.exports = {
 3     entry:{
 4         app:'./app.js'
 5     },
 6     output:{
 7         filename:'[name].[hash:8].js'
 8     },
 9     module:{
10         rules:[
11             {
12                 test:/\.js$/,
13                 use:{
14                    loader: 'babel-loader',
15                     options:{
16                        presets:[
17                            ['@babel/preset-env',{
18                                targets:{
19                                    // browsers:['>1%','last 2 versions']
20                                    browsers:['last 2 versions']
21                                    // chrome:'52'
22                                }
23                            }]//给babel指定presets
24                        ]
25                     }
26                 },
27                 exclude:'/node_modules/'
28             }
29         ]
30     }
31 }

测试的es6代码：

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

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

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

比如：

1 Generator
2 Set
3 Map
4 Array.from
5 Array.prototype.includes

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

安装：

1 npm install babel-polyfill --save

引入app.js文件

1 import "babel-polyfill"

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

安装：

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

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

 2 {
 3   "presets":[
 4     [
 5       "@babel/preset-env",{
 6           "targets":{
 7                 "browsers":["last 2 versions"]
 8           }
 9     }]
10   ],
11   "plugins":["@babel/transform-runtime"]
12 }

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

1 "scripts": {
2   "dev": "webpack --mode development",
3   "build": "webpack --mode production"
4 }