webpack入门教程

原文地址http://180.76.112.195:8000/article/33

Webpack 可以将多种静态资源 js、css、less、scss 转换成一个静态文件，减少了页面的请求。

1、安装webpack

// 创建文件夹
mkdir webpack-starter
// 进入webpack-starter目录
cd webpack-starter
// 初始化node项目
npm init -y
// 安装webpack， webpack v4+ 版本依赖webpack-cli
npm install webpack webpack-cli --save-dev

2、webpack打包

1. webpack-starte项目根目录下创建src/index.js

mkdir src
touch index.js

2. 编辑/src/index.js

// /src/index.js
console.log(123)

3. 执行命令打包

npx webpack --entry=./src/index.js --output=./dist/bundle.js --color --progress --mode=development
// 或
npx webpack ./src/index.js --o=./dist/bundle.js --color --progress --mode=development

• npx webpack打包命令 后面的都是参数
• –entry=<文件名> 打包入口文件 可以省略–entry=，直接写文件名
• –output=<文件名>打包生成的文件 可以简写成 -o=<文件名>
• –color 命令行添加颜色
• –progress 显示进度
• –mode 模式 development开发这模式 production生产模式
• …

3、webpack配置文件

webpack打包时可以使用配置文件，可以在配置文件中配置入口、出口、loader、plugins

// 在根目录下创建webpack.config.js
vim webpack.config.js

// webpack.config.js

var path = require("path");
module.exports = {
    mode: development,
    // 入口文件
    entry: __dirname + '/src/index.js',
    // 输出文件
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    }
}

// 使用以下命令打包
npx webpack --config=webpack.config.js --color --progress
// 或
npx webpack --color --progress 
// webpack 默认的配置文件是根目录下的webpack.config.js所以打包时可以省略--config=webpack.config.js