Webpack入门

Webpack：是前端模块管理和打包工具。

配置

Webpack简单点的理解就是一个配置文件 webpack.config.js，所有的配置都在这个文件中。其包含：

• entry: 入口文件，也就是以那个文件作为项目的入口。
• output: 出口,让webpack把处理完成的文件放在哪里
• module: 不同模块的loader的配置

最简单的一个配置文件：

module.exports = {
  entry:[
    './app/main.js'
  ],
  output: {
    path: __dirname + '/assets/',
    publicPath: "/assets/",
    filename: 'bundle.js'
  }
};

从上面可以看到有以下三个：(一般定义为常量声明在头部)

• path: 打包文件存放的绝对路径
• publicPath: 网站运行时的访问路径
• filename: 打包后的文件名

项目结构

• /app
  • main.js
  • sub.js
• package.json
• webpack.config.js

此时Webpack的大致结构已经说完了。

安装

Webpack一般作为全局的npm模块安装：

npm install -g webpack

安装完成后，创建文件夹，使用npm init配置一些基本信息。

这个时候webapck的基本准备工作已经完成。

举个🌰

`我得补上这个🌰`