webpack3.10.0版本安装教程

webpack 3.10.0版本安装教程

在命令框中：

全局安装：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"); $("p").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中就可以 随意更改 直接刷新浏览器就可以了 不用手动去编译了