【01】webpack4.0教程_基础_1

学习webpack4.0的笔记，循序渐进，后续会再做系统总结

[toc]

webpack安装

总结

• 安装本地的webpack

webpack webpack-cli -D

• 加一个-D表示开发依赖 上线的时候不需要这两个包

流程：

初始化项目 生成package.json记录依赖

yarn init -y

或者

npm init -y

安装 webpack和webpack-cli （webpack4.0需要安装webpack和webpack-cli）

yarn add webpack wabpack-cli -D

或者

npm install webpack webpack-cli --save-dev

image

webpack可以进行0配置

总结

• 命令：（此命令会根据配置文件生成 打包后的文件夹（0配置情况下默认生成dist/main.js））

npx webpack

• 不需配置也可以使用
  打包工具 -> 输出后的结果 (js模块)
  打包目录 src文件夹下的index.js
  打包 (支持我们的js的模块化)

流程

新建 src/index.js

image

执行命令npx webpack 打包

image

• npx webpack这个命令
  （会去找.bin下面的webpack.cmd文件，这个文件又会去找webpack.js）
  （可以看到webpack.js里会依赖webpack-cli，不安装会报错）

  
  
  image

结果 命令执行后会自动生成dist/main.js混淆压缩文件

image

新建 html引用打包后的结果并启动：

（webpack以当前js为准，查找所有引用的js模块，生成一个js文件）
启动命令如下，未安装的可自行搜索live-server

live-server

image

image

手动配置webpack

总结

• 默认配置文件的名字 webpack.config.js

//webpack node语法
let path = require('path') //node内置模块

module.exports = {
    //模式 有production和development两种,production最后生成的出口文件是混淆压缩的，developement是便于调试的
    mode: 'development',
    entry: './src/index.js', //入口文件 webpack会以此文件，查找依赖，并打包
    output: { //出口配置 打包后生成的文件
        filename: 'bundle.js',//打包后生成的文件名
        //文件路径 此路径是一个绝对路径，path的这个方法会找到此绝对路径，放在名为build的文件夹下(没有build文件夹的话会生成一个)
        path: path.resolve(__dirname, 'build')
    }
} 

流程

项目根目录下创建配置文件webpack.config.js

书写配置（！各配置意义）

image

创建./src/a.js并引入到./src/index.js中

image

执行命令 npx webpack 打包

启动查看结果

image

(webpack.config.js是默认的文件夹名称，来源在以下文件，可否修改此名称？后续进行详解)

image