webpack 3.10.0版本安装教程

本教程详细介绍了如何在已安装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中就可以 随意更改 直接刷新浏览器就可以了 不用手动去编译了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值