webpack使用

全局安装webpack

运行CMD，安装命令如下所示，其中， -g是全局安装，并移除安装了 webpack和webpack-cli

npm install webpack webpack-cli –g

创建本地项目文件夹

创建项目本地文件夹，如“D:\TestWebpack”，在CMD命令窗中分别输入如下命令，切换到该目录

D:                 //切换到D盘
cd D:\TestWebpack //切换到项目目录

本地安装webpack

输入如下命令，在项目目录中安装webpack，其中，--save-dev是本地安装

npm install webpack webpack-cli --save-dev

查看webpack 版本

输入如下命令，若出现版本号，说明安装成功。

webpack -v

创建package.json文件

输入如下命令，将在项目目录中自动生成package.json文件

npm init -y

配置打包目录

在项目目录下，新建config文件夹，用于存放配置文件；src文件夹，用于存放源码；out文件夹，用于存放打包生成文件，具体如下图所示。

添加webpack.config.js文件

在config文件夹中添加webpack.config.js文件，并添加如下代码：

const path=require('path'); //调用node.js中的路径
module.exports={
    entry:{
        index:'./src/js/index.js' //需要打包的文件
    },
    output:{
        filename:'[name].js',    //输入的文件名是什么，生成的文件名也是什么
        path:path.resolve(__dirname,'../out') //指定生成的文件目录
    },
    mode:"development"    //开发模式，没有对js等文件压缩，默认生成的是压缩文件
}

运行webpack

在cmd命令窗体中，输入如下命令，运行成功后，在out目录中会生成打包后的index.js

webpack --config config/webpack.config.js

 配置package.json

每次输入命令webpack --config config/webpack.config.js，太长，且非常不方便，此时我们可以在package.json文件中配置，如下所示：

{
  "name": "TestWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config config/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
  }
}

配置完成后，我们输入的如下命令，可以直接打包。

npm run start

常用插件：

html-webpack-plugin 生成入口文件，并注入依赖
mini-css-extract-plugin 样式提取插件
optimize-css-assets-webpack-plugin 样式优化压缩/配合添加前缀等