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