序

现在依旧记得第一次看到webpack3.x 版本配置时候的状态刚开始看到这些真的是一脸懵。希望这篇文章能帮到刚开始入门的同学。

webpack 是什么？

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

环境搭建

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，哈哈~~~

巴特西

webpack4.x 从零开始配置vue 项目（一）基础搭建项目

序

webpack 是什么？

相关概念

环境搭建

在窗口执行

源码

最新文章

热门文章