脱离脚手架来配置、学习 webpack4.x （一）基础搭建项目

序

如今依旧记得第一次看到webpack3.x 版本配置时候的状态  刚开始看到这些真的是一脸懵。但愿这篇文章能帮到刚开始入门的同窗。

 

webpack 是什么？

webpack是一个模块化打包工具，webpack 经过入口分析项目结构，找到JavaScript模块以及一些不能直接在浏览器上运行的语言、语法等 如（scss、ts、es6+等），并将其打包成能够直接在浏览器运行的js，以及压缩、加密、按需加载等。

相关概念

• Entry：入口，webpack执行构建的第一步将从Entry开始，可理解为输入 
• Module：模块，在webpacl中一切皆为模块，一个模块对应一个文件，webpack会从配置的Entry开始递归找出全部依赖的模块
• Chunk：代码块，一个chunk由多个模块组合而成，用于将代码合并和分割 
• Loader：模块转换器，用于把模块原内容按照需求转换为须要的新内容 
• Plugin：扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果和想要作的事情 
• Output：输入结果，在webpack通过一系列处理并获得最终想要的代码而后输出结果
• runTime：在浏览器运行时，链接模块的链接器
• manifest：webpack 编译时记录全部模块的详细信息的数据集合（链接器来这里查询具体的模块）

 环境搭建

一、先用npm初始化一个项目，获得 package.json 文件

1 npm init -y 或者
2 npm init // 这个要填写一些信息 如 名称 邮箱 版本 等等

 

二、安装webpack 4 将CLI 独立出来了，因此须要安装两个包

1  npm install webpack webpack-cli -D

 webpack-cli 我以为全局安装比较方便，命令行全局安装不会形成版本冲突之类的。根据官网的api，如今咱们能够进行打包了。

可是为了更加方便的打包咱们须要用到npm script 功能（简单的说就是临时把node_modules 路径加到系统环境变量）。

先创建好相关文件如 webpack.config.js

在package.json  scripts 中加入

1 "build:dev": "webpack --mode development"

 

在webpack.config.js 中导出一个最简单的对象给webpack

 1 'use strict'
 2 const path = require('path')
 3 
 4 // path
 5 function resolve (dir) {
 6   return path.join(__dirname, dir)
 7 }
 8 
 9 module.exports = {
10   mode: 'development',
11   entry: {
12     app: './main.js'
13   },
14   output: {
15     filename: '[name]-[hash].js',
16     path: path.resolve(__dirname, 'dist'),
17     publicPath: './'
18   }
19 
20 }

在窗口执行 

1 npm run build:dev

不出问题，应该是打包成功了。

源码

   https://github.com/ben-Run/webpack-learn 

   要是帮到你了能够点下star， 哈哈~~~