webpack4.x最新入门配置详解
133 浏览量
2021-01-08
14:43:25
上传
评论
收藏 350KB PDF 举报
webpack4.x最新入门配置详解最新入门配置详解
目录目录
什么是webpack
webpack可以做什么
学习webpack的前提
webpack安装
webpack学习
webpack基础配置
html插件
样式处理
将ES6，ES7等高级语法转化为浏览器可识别的ES5语法
什么是什么是webpack
本质上，webpack 是一个现代 JavaScript应用程序的静态模块打包器(module bundler)。当 webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序
需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack可以做什么可以做什么
代码转换
把es6转成es5，把sass,less转成css；
文件优化
压缩代码体积，合并文件
代码分割
公共模块分离，懒加载
模块合并
按照功能，把多个模块合并成一个模块
自动刷新
自动启动服务，代码变更后页面也跟着变更，热更新
代码校验
校验代码是否符合规范
自动发布
把打包后的结果发布到服务器上
学习学习webpack的前提的前提
需要node基础，npm的使用
掌握es6语法
webpack安装安装
前提：需要node.js环境（安装配置node.js环境）
本地安装webpack命令如下：
npm install webpack webpack-cli -D
webpack学习学习
1. webpack基础配置基础配置
// a.js
module.exports = 'hello'
// index.js
let str = require('./a.js')
console.log(str)
文件webpack.config.js是webpack的配置文件，
webpack是node写出来的，因此用node的写法
// webpack.config.js 内容
let path = require('path')
module.exports = {
mode:'development', // 模式 默认两种：production development
entry:'./src/index.js', // 入口
output:{
filename:'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
}
}
上面基础配置含义为：
在开发模式下（文件不压缩），根据入口文件./src/index.js的内容，构建内部依赖图并处理，最后输出到出口文件当前目录下的dist文件中的文件名为bundle.js的文件上
mode属性设置属性设置webpack的模式的模式
production 生产模式，打包后的代码是压缩的
development开发模式， 打包后的代码是不压缩的
相关属性：
entry 设置打包入口设置打包入口
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
每个依赖项随即被处理，最后输出到output属性设置的文件中
评论0