我要评论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中就可以 随意更改 直接刷新浏览器就可以了 不用手动去编译了
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论