Webpack

目录结构

 

终端进行下载依赖

初始化package.json

npm init  -y

此时会生成一个基础package.json文件

继续下载依赖

• -S是-save的简写。npm i module_name -S(等同于npm i module_name --save)安装插件是需要发布到生产环境的
• -D是-dev的简写。npm i module_name -D(等同于npm i module_name --save-dev)安装插件只用于开发环境，不用于生产环境.
• -g将模块安装到全局。npm i module_name -g

npm webpack   webpack-cli  -D

2.启用webpack

开发者模式

npx  webpack  ./src/main.js  --mode=development

生产模式 

npx webpack ./src/main.js --mode=production

• npx webpack:是用来运行本地安装webpack包的。
• ./src/main.js:指定(webpack 从 main.js,文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
• --mode=xxx:指定模式(环境)。 

3.webpack 五大核心概念

1.entry (入口)

指示 Webpack 从哪个文件开始打包

2.output(输出)

指示 Webpack打包完的文件输出到哪里去，如何命名等

3. loader (加载器)

webpack本身只能处理js、json等资源，其他资源需要借助loader，Webpack 才能解析

4.plugins(插件)

扩展Webpack的功能

5. mode(模式)

主要由两种模式:

• 开发模式: development
• 生产模式: production
   

实例：

const path = require("path")

module.exports = {
    // 入口
    entry: "./src/main.js",
    // 输出
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js"
    },
    // 加载器
    module: {
        rules: [],
    },
    // 插件
    plugins: [],
    // 模式
    mode: "development", // 开发模式
}