webpack 3.10.0版本安装教程

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

在dos命令框中：

全局安装：npm install [email protected] -g

本地安装：npm install --save-dev [email protected]

打包成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 [email protected] --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中就可以随意更改直接刷新浏览器就可以了不用手动去编译了

webpack 3.10.0版本安装教程

猜你喜欢