十一、webpack介绍
2019-06-11 本文已影响0人
Epat
一、webpack简介
随着nodeJs的出现，前端可以在平台上直接运行javaScript代码，为了简化前端开发流程，前端开发者们开发了一大批html、js、css处理工具
- uglifyjs js压缩工具
- postcss css预处理工具
-
babel 将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
webpack可以很好的以模块的方式将你的html、js、css打包成你想要的结果。
二、webpack基本示例
-
我们在任意目录下执行npm init，然后输入你需要创建的项目信息
项目初始化
- 安装如下依赖
npm install webpack
npm install html-webpack-plugin
- 新建webpack.config.js webpack配置文件
HtmlWebpackPlugin这个插件会将打包好的bundle文件插入到html中
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js", // 入口文件
output: {
filename: "bundle.js", // 打包后的文件名称
path: path.resolve("dist") // 打包后的目录，必须是绝对路径
}, // 出口文件
module: {}, // 处理对应模块
plugins: [
new HtmlWebpackPlugin({
// 用哪个html作为模板
// 在src目录下创建一个index.html页面当做模板来用
template: "./src/index.html",
hash: true // 会在打包好的bundle.js后面加上hash串
})
], // 对应的插件
devServer: {}, // 开发服务器配置
mode: "development" // 模式配置
};
4.新建src/index.js，并添加如下代码
console.log("hellow webpack")
5.新建src/index.html，并添加如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Webpack App</title>
</head>
<body>
你好 webpack
</body>
</html>
6.在package.json中添加如下代码
"scripts": {
"build": "webpack"
}
7.最后我们在cmd中执行如下代码
npm run build
8.在新生成的dist目录中，打开index.html
webpack初见
可以看到我们的第一个webpack应用已经打包成功了
