什么是webpack

1. webpack基本概念

目标: webpack本身是, node的一个第三方模块包, 用于打包代码

现代 javascript 应用程序的 静态模块打包器 (module bundler)
为要学的 vue-cli 开发环境做铺垫

==webpack能做什么==

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度(演示准备好的例子)

其中功能:

less/sass -> css
ES6/7/8 -> ES5
html/css/js -> 压缩合并

2. webpack的使用步骤

2.0_webpack基础使用

目标: 把src下的2个js文件, 打包到1个js中, 并输出到默认dist目录下

默认入口: ./src/index.js

默认出口: ./dist/main.js

==注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名==

初始化包环境
```
yarn init
```
安装依赖包
```
yarn add webpack webpack-cli -D
```
配置scripts(自定义命令)
```
scripts: {"build": "webpack"
}
```
新建目录src
新建src/add/add.js - 定义求和函数导出
```
export const addFn = (a, b) => a + b
```

新建src/index.js导入使用

import {addFn} from './add/add'

console.log(addFn(10, 20));

运行打包命令
```
yarn build
#或者 npm run build
```

总结: src并列处, 生成默认dist目录和打包后默认main.js文件

2.1_webpack 更新打包

目标: 以后代码变更, 如何重新打包呢

新建src/tool/tool.js - 定义导出数组求和方法

export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)

src/index.js - 导入使用

import {addFn} from './add/add'
import {getArrSum} from './tool/tool'

console.log(addFn(10, 20));
console.log(getArrSum([1, 2, 3]));

重新打包
```
yarn build
```

总结1: src下开发环境, dist是打包后, 分别独立

总结2: 打包后格式压缩, 变量压缩等

3. webpack的配置

3.0_webpack-入口和出口

目标: 告诉webpack从哪开始打包, 打包后输出到哪里

默认入口: ./src/index.js

默认出口: ./dist/main.js

webpack配置 - webpack.config.js(默认)

新建src并列处, webpack.config.js
填入配置项

const path = require("path")

module.exports = {entry: "./src/main.js", // 入口output: { path: path.join(__dirname, "dist"), // 出口路径filename: "bundle.js" // 出口文件名}
}

3.修改package.json, 自定义打包命令 - 让webpack使用配置文件

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

4.打包观察效果

什么是webpack相关推荐

第四天：Vue组件的slot以及webpack
插槽认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录（一）
webpack简介我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...
webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
webpack打开项目命令_配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...