webpack4脚手架搭建1——打包并编译es6

使用webpack

执行webpack -h 查看webpack命令行使用说明

安装webpack与webpack-cli

cnpm install webpack -g
cnpm install webpack-cli -g

安装webpack后执行webpack -v会提示安装webpack-cli，这是因为在webpack3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。所以需要全局安装webpack-cli。

初始化项目

两种方式，一种是使用 webpack-cli init初始化项目，另一种自己配置webpack.config.js，这里采用手动配置方式
执行cnpm init 初始化项目

{
  "name": "webpack4-cli",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

创建项目目录

app.js

这里采用一些常用的es6语法

let func = () => {}
const NUM = 45
let arr = [1,2,4]
let arrB = arr.map(item => item * 2)

console.log('打印结果：', Array.from(new Set(arrB)))

编译es6

由于浏览器版本差异，低版本的浏览器不兼容es6语法，为了更好的兼容更多的浏览器，webpack使用babel来编译es6/7

1.使用babel-loader编译或处理静态文件

 cnpm install [email protected] @babel/core @babel/preset-env  --save-dev

注意：babel-preset是babel的规范,其中preset-env包含es2015,es2016.es2017的普遍规范，因为新版本的Babel7中对官方提供的依赖使用了命名空间@babel，如果你不小心安装了旧版本可能会报错， 所以这里推荐使用新版本

2.使用Babel Polyfill 或 Babel Runtime Transform 处理方法和函数（例如Map、Set、Array.from、includes、function*()等）

Babel Polyfill 全局垫片，统一不同浏览之间的标准，适合开发应用
安装:执行命令

 cnpm install babel-polyfill --save

使用:

Babel Runtime Transform 局部垫片,适合开发框架，不会污染全局变量

安装：执行命令

cnpm install @babel/plugin-transform-runtime --save-dev
cnpm install @babel/runtime --save

使用：根目录下创建.babelrc

{ 
    "presets":[
        ["@babel/preset-env",{
            "targets":{
                "browsers":[">1%","last 2 versions"] //这里是兼容浏览器的版本
            }
        }]
    ],
    "plugins": ["@babel/transform-runtime"]
}

这里采用的是Babel Runtime Transform

安装后的package.json如下

配置webpack.config.js

在webpack配置文件中，关于babel的调用需要写在module模块中。对于相关的匹配规则，除了匹配js结尾的文件，还应该去除/node_modules/文件夹下的第三库的文件（发布前已经被处理好了）

module.exports = { //module.exports为CommonJS规范
    entry: { //入口
        app: './src/app.js'
    },
    output: { //出口
        filename:'[name].[hash:8].js' //设置打包出的文件名称 = 源文件名.8位哈希值.后缀名
    },
    mode:'development', //development 开发环境  production生成环境
    module:{
        rules: [ //模块用到的规则
            {
                test:/\.js$/, //匹配规则
                use:{         
                    loader:'babel-loader'
                },
                exclude:'/node_modules/' //排除规则 第三方仓库不用编译
            }
        ]
    }
}

注:webpack.config.js是webpack命令默认执行的文件名，如果自定义配置文件名称，则使用webpack --config 自定义名称.js 命令来打包JS

打包JS

执行命令webpack开始打包，默认自动生成dist文件夹， 打包出的文件名称即为设置的output.filename，这里为了测试，临时改成bundle.js

运行结果

将生成的js文件引入index.html

运行页面，我这里用的是VScode的live server，运行结果如下

相关资料

babel版本问题：https://www.cnblogs.com/cag2050/p/10087554.html
编译 ES6：https://blog.csdn.net/AsuraDong/article/details/81322361