Webpack学习记录(一)

Webpack学习记录(一)

1. 什么是webpack

   ​ webpack可以看做是模块打包工具，它做的事情是，分析你的项目结构，找到JavaScript模块以及一些浏览器无法直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式供浏览器使用。

   

   可以做的事情：代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布。

2. webpack安装

   初始化项目

   npm init -y

   本地安装webpack

   npm install webpack --save-dev或 npm i webpack -D

   npm install webpack-cli --save-dev 或 npm i webpack-cli -D

3. 简单使用webpack

   建立一个index.js文件
   

   可以通过以下两种方式进行打包：

   1. npx webpack

      该操作会默认寻找node_modules/.bin下的webpack.cmd文件
      

      如果当前目录下有node.exe则执行上一条语句，否则执行else，即在node_modules目录下找webpack。

   2. npm run build

      在package.json文件中配置脚本运行命令

      "scripts": {
          "build": "webpack --config webpack.config.js"
      }
      

   执行上述命令后会默认生成dist/main.js。在没有配置模式的情况下会弹出警告The 'mode' option has not been set...，默认是production模式，会对代码进行压缩等操作。

4. 基本配置

   通过webpack-cli/bin/config-yargs.js解析webpack.config.js进行配置。

   // webpack.config.js
   const path = require('path') //node的核心模块之一
   
   module.exports = {
   	mode: 'development'	//为了更好的看代码，这里设置为开发模式
   	entry: './src/index.js',	/入口文件
   	output: {
   		filename: 'bundle.js',	//打包后的文件名
   		path: path.resolve(__dirname, 'dist')	//利用path模块将相对路径转化为绝对路径
   	}
   }
   
   
   

   配置过后会在dist目录下生成一个bundle.js，可以在dist目录中手动新建一个index.html然后将bundle.js引入，观察效果。