脱离脚手架来配置、学习 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 编译时记录所有模块的详细信息的数据集合（连接器来这里查询具体的模块）

 环境搭建

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

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

 

2、安装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， 哈哈~~~