webpack4.xx使用

最新推荐文章于 2025-07-11 16:02:57 发布

原创最新推荐文章于 2025-07-11 16:02:57 发布 · 707 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何从零开始使用Webpack 4.x搭建一个简单的前端开发环境，包括项目初始化、配置文件详解及开发服务器的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.0前后的版本变化比较大，具体请看webpack4.0注意事项

我这里使用的是webpack 4.16.0
假设机器已安装npm

mkdir npmtest
cd npmtest
npm init

会显示
这里写图片描述

提示录入相关的信息，也可一路回车，最后yes，之后自动生成一个package.json文件
这里写图片描述

在wp目录下新增webpack.config.js文件，内容如下

const path = require('path');
module.exports = {
    //入口文件
    entry:'./src/main.js',
    output:{
        //将所有依赖的模块合并输出到一个bundle.js文件
        filename:'bundle.js',
        //输入文件都放到dist目录下
        path:path.resolve(__dirname,'./dist'),
    }
};

全局安装webpack

npm i -g webpack

4.0之后还需要安装webpack-cli了

npm i -g webpack-cli

到你的npm的目录的bin目录可以看到多了一个webpack和webpack-cli
分别建立软连接，本人机器的bin目录地址为/node-v8.11.3-linux-x64/bin

ln -s /node-v8.11.3-linux-x64/bin/webpack /usr/local/bin/webpack
ln -s /node-v8.11.3-linux-x64/bin/webpack /usr/local/bin/webpack

至此可以使用webpack命令

打包

#开发模式打包
webpack --mode development

要让页面跑起来还需要webpack-dev-server

npm i -g webpack-dev-server

建立软连接

ln -s /node-v8.11.3-linux-x64/bin/webpack-dev-server /usr/local/bin/webpack-dev-server

编辑package.json文件的scripts里添加一个快速启动webpack-dev-server服务的脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js --mode development"
  },

当执行 npm run dev 时就会执行 webpack-dev-server –open –config webpack.config.js的命令

由于我使用的是虚拟机，所以ip需要修改一下

"dev": "webpack-dev-server --host 192.168.123.229 --port 8080 --open --config webpack.config.js --mode development"