webpack前端项目搭建

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。

新建项目

mkdir test_proj
cd test_proj
npm init

安装webpack

npm install webpack webpack-cli webpack-dev-server

搭建项目目录结构

新建目录

mkdir config dist src

创建入口html、js文件

touch dist/index.html src/index.js

webpack打包

在package.json中添加webpack打包命令

{
  ...
  "scripts": {
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

配置完成后执行命令

npm run build

webpack默认入口文件为src/index.js，默认打包模式为development，共有两种模式

• development
• production

webpack配置介绍

webpack配置文件

主要有四个核心概念：

• 入口：打包文件的入口，支持多人口
• 输出：打包后的输出位置
• 加载器：针对对应的文件进行转义，解析成浏览器识别的文件
• 插件：解决loader无法实现的其他事

创建配置文件

touch config/webpack.dev.js

启动服务查看前端项目

使用webpack-dev-server可以在打包项目后自动启动一个服务器来查看前端项目，配置如下

{
	devServer: {        //webpack-dev-server配置（仅开发环境需要）
		static: path.join(__dirname, './dist'), //编译打包文件的位置 
		port: 8080,                 //服务器端口号
		host: '0.0.0.0',
		proxy: {},                  //代理列表
		compress: true,
		historyApiFallback: true,   //开启服务器history重定向模式
	}
};

在package.json添加指令

{
  ...
  "scripts": {
    "build": "webpack --config config/webpack.dev.js",
    "dev" : "webpack-dev-server --config config/webpack.dev.js --color --progress --hot" // --color 启用彩色打印  --progerss 启用进程监测 --hot 启用热加载
  },
  ...
}

常用loader

loader转换非js文件，执行顺序从后到前

babel

转换js版本

CSS

• style-loader 将JS字符串转换为style节点插入html中生成内联样式
• css-loader 将CSS转换为CommonJS，可以直接使用import/require导入

资源文件loader

• file-loader 文件处理
• url-loader url链接处理

常用插件

插件的功能更为强大，可以实现打包优化、压缩

• htmlWebpackPlugin 将html模板和js文件整合在一起

参考

• https://juejin.cn/post/6844903791318269959
• https://blog.csdn.net/Charissa2017/article/details/105055945