使用webpack-cli体验零配置打包

初始化项目

  1. 创建项目
  2. mkdir zero-config && cd $_
  4. 初始化
  5. npm init -y
  7. 安装 webpack 和 webpack-cli到开发依赖
  8. npm i webpack webapck-cli --save-dev

npm scripts 

  1. "scripts":{
  2.     "build":"webpack"
  3. }

tips: webpack的打包环境有production 和 development 两种,分别对应生产环境和开发环境,生产环境默认配置包括压缩等常用的配置

修改打包输出目录

1.默认入口文件 src/index.js
2.默认输出目录 dist/main.js

  1. "scripts":{
  2.     "dev":"webpack --mode development --output ./output/main.js"
  3. }

使用Babel来做ES6语法转换
**
用的是babel-loader 这个loader 依赖@babel/core 和 @babel/preset-env
安装:

  1. npm i @babel/core babel-loader @babel/preset-env --save-dev

配置

  1. 在项目的根目录下创建一个babel的配置文件.babelrc
  3. {
  4.     "presets":["@babel/preset-env"]
  5. }

修改 npm scripts

  1. "scripts":{
  2.     "build":"webpack --mode development ./src/es/index.es.js --module-bind js=babel-loader"
  3. }