webpack学习入门
什么是 webpack ？
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言Scss等并将其打包为合适的格式以供浏览器使用构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。
初始化项目
- npm init //初始化生成package.json文件
{
"name": "webpack1",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",//webpack配置文件入口
"scripts": { // npm run xxx配置
"test": "echo "Error: no test specified" && exit 1",
"dev":"webpack-dev-server --open --development",
"build":"webpack -p"
},
"author": "",
"license": "ISC"
}
-
创建webpack.config.js配置文件
var path = require('path');
module.exports = {
entry:path.resolve(__dirname,'./static/main.js'),// _dirname 自动生成为绝对路径
output: {
filename: '[name].js'//name对应 entry引入文件的名称
},
devServer: { //webpack-dev-server运行配置
host:'127.0.0.1',port:8088
},
mode: 'production' //模式配置
}; （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
