Webpack（笔记自用）

一、Webpack是什么？

Webpack 是前端资源模块化管理和打包工具。是将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。。

二、使用步骤

1.创建

md mypack
//新建文件夹
 
cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立
 
npm init  
//  初始化项目文件夹 会创建一个package.js
 
//本地安装
npm install --save-dev webpack
npm install --save-dev webpack-cli

初始化项目
npm init y

安装：npm i webpack webpack-cli-D

配置文件：

2.核心概念：entry（入口）output（出口，输出）loader（加载器）mode（模式）devServer（本地服务器）plugins（插件）

entry（入口）

entry:'./src/index.js',
entry{"名":"地址",}

output（出口，输出）

// 输出
output:{
	// 路径，__dirname 当前目录
	path:__dirname+"/dist",
	// 文件名称
	filename:'[name]-[hash:7].js'
},

loader（加载器）

webpack默认只能够处理js文件
loader把非js文件转换为webpack可以处理的模块

使用加载器加载CSS文件或TypeScript文件，并转换为JavaScript。 首先，安装相应的加载器：

npm install --save-dev css-loader
npm install --save-dev ts-loader

其次，在你的webpack.config.js中配置匹配每个.css文件，并运用css-loader生成js资源，同理对.ts文件， 运用ts-loader`：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {test: /\.css$/, use: ['css-loader'](/loaders/css-loader)},
      {test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)}
    ]
  }
};

mode（模式）

mode:"production"//产品模式
mode:"development" //开发模式

devServer（本地服务器）

作用：本地启动一个服务器

安装：

npm i webpack-dev-server

服务器配置：

// 本地服务器配置
	devServer:{
		open:true,//自动打开浏览器
		hot:true,//热更新
		host:"localhost",//本地域名
		port:8080,//端口号
		proxy:{}//同vue.config.js 里面的代理配置
	}

package.json

script
"serve":"webpack server",

启动命令：

npm run serve