webpack 3.10.0版本安装教程

最新推荐文章于 2025-04-02 14:40:01 发布

感谢遇到的每一个人

最新推荐文章于 2025-04-02 14:40:01 发布

阅读量3.9k

点赞数

分类专栏： webpack 文章标签： webpack3版本

本文链接：https://blog.csdn.net/qq_36979290/article/details/83028927

版权

webpack 专栏收录该内容

1 篇文章

订阅专栏

本教程详细介绍了如何在已安装Node.js的环境中，通过npm安装Webpack 3.10.0进行全局和本地安装。讲解了如何打包、监测文件变化、压缩代码，以及处理CSS样式。还提到了引入jQuery第三方库的方法，并指导如何配置webpack.config.js。此外，文章还阐述了如何安装和配置webpack-dev-server 2.9.4以实现热更新和更改端口号。

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

前提电脑有安装node.js（自带npm）!

在dos命令框中：

全局安装：npm install webpack@3.10.0 -g

本地安装：npm install --save-dev webpack@3.10.0

打包成bundle.js命令：webpack xx.js bundle.js

监测文件（发生改变生成另外一个文件）：webpack --watch ./src/app.js ./dist/app.bundle.js

压缩命令(用于生成环境)：webpack -p ./src/app.js ./dist/app.bundle.js //将scr目录下的app.js 压缩生成 dist目录下的 app.bundle.js文件

初始化：npm init

css样式处理：
1.安装：npm install css-loader style-loader

2.require("!style-loader!css-loader!./css文件路径/style.css") 没有配置的

3.在webpack中配置了css,直接在js中：require("css文件路径");

webpack.config.js配置：

配置webpack.config.js 直接在dos命令输入 webpack 执行

加载第三方库jquery：npm install jquery --save-dev 然后再 show.js 中 var $=require("jquery"); $("div").text("第三方库");

服务端环境安装：

3版本的webpack 和webpack-dev-server 2版本兼容，3版本以上的server不兼容

npm install webpack-dev-server@2.9.4 --save-dev

更改端口号：在webpack.config.js 中添加 devServer:{port:8091}
在package.json中配置：
"scripts": {
"start":"webpack-dev-server --entry .c/js/one.js --output-filename ./distndle.js",
"build":"webpack --watch"
},

//package.json 里面不可以有注释
{
  "name": "webpackvue",
  "version": "1.0.0",
  "description": "",
  "main": "show.js",
  "scripts": {
    "start":"webpack-dev-server --entry .c/js/one.js --output-filename ./distndle.js",
    "build":"webpack --watch"
  },
  "author": "yh",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.1"
  },
  "devDependencies": {
    "jquery": "^3.3.1",
    "webpack-dev-server": "^2.9.4"
  }
}

打开2个DOS命令窗口，一个先输入：npm run build 让它重新编译一下

在一个输入：npm start 运行后会出现一个带有端口号的网址去浏览器上打开即可

最后在one.js 或者相关联one.js文件的其它css/js/html中就可以随意更改直接刷新浏览器就可以了不用手动去编译了