webpack 4.x学习笔记

webpack学习入门

什么是 webpack ？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言Scss等并将其打包为合适的格式以供浏览器使用

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。

初始化项目

1. 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"
   }

2. 创建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' //模式配置

};