webpack4入门操作

简介

webpack4运用了大量的es6语法，这些es6语法在nodejs v8.9.4及以上版本中能够得到原生的支持。
webpack4使用零配置，即无需配置文件就可以将资源打包到默认路径。
webpack4中cli工具分离为webpack核心库和webpack-cli命令行工具两个模块。

安装

1. 确保node版本 >= v8.9.4
   

2. 初始化配置文件package.json
   

3. yarn add webpack webpack-cli -D
   

零配置

webpack4 设置了默认值，以便无配置启动项目

entry 默认值是 ./src/index.js
output.path 默认值是 ./dist
mode 默认值是 production

创建src/index.js

打包(无配置文件)

打包（有配置文件）

webpack默认读取根目录的webpack.config.js配置文件，配置文件更加灵活的制定loader规则、plugins等。

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

此处–config webpack.config.js可省略

打包（使用npm脚本）

  "scripts": {
    "build": "webpack"
  }

在package.json中设置一个快捷方式引入本地安装的npm包

生成了dist/main.js

参考

http://coderlt.coding.me/2018/04/12/webpack4/?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com