初步学习webpack,构建简单项目，实现基本打包
它对webpack的定义是：本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
webpack的作用
1.代码压缩打包（css/html/javascript）；
2.语法的转换（例如es6转es5）；
3.提供开发环境（自开启浏览器、热更新等）；
（欢迎补充）
webpack是现在最流行的模块打包工具，优点是可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求（模块化）。
webpack的基本打包配置演示
1.新建文件打开PowerShell并执行下面命令初始化
cnpm init -y
2.安装依赖包（推荐全局安装）
npm install -g webpack webpack-cli -D
3.开发工具中打开项目 到package.json文件中, 配置scripts
scripts: {
"build": "webpack --config webpack.config.js"
}
4.文件根目录下新建 webpack.config.js文件 并在里面配置以下内容
//配置
const path = require('path') //引入路径
module.exports = {
// entry: 配置入口文件 (从哪个文件开始打包)
entry: './src/main.js',
// output: 配置输出 (打包到哪去)
output: {
// 打包输出的目录 (必须是绝对路径)
path: path.join(__dirname, 'dist'),
// 打包生成的文件名
filename: 'bundle.js'
},
// 打包模式 production 压缩/development 不压缩 开发环境
//production生产环境
mode: 'development'
}
5.根目录下建立src文件夹 在里面建立入口文件main.js
npm build
7.打包完成后发现新文件dist 打包成功
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。