vue笔记day5 （2）webpack

教程里用的webpack3，但是现在出到4了，安装4之后遇到不少问题，又给卸载后安装了webpack3

1.卸载原来webpack

sudo npm uninstall webpack -g

2.安装第三版的weback

sudo npm install webpack@3.4.1 -g

3.查看webpack版本

webpack -v

4.我之前装好了webpack-cli，如果不成功要装一次webpack-cli

5.尝试用webpack打包

webpack ./src/main.js ./dist/bundle.js

注意，要把源代码目录下的无关package.json,和webpack.config.js删掉，现在还没完全装好所有的插件，如果已有的config可能导致配置出错。现在的配置文件只有node文件夹中webpack的package.json文件。

如果没有jquery：

npm i jquery

如果没有其他错误，这样可以实现打包。命令行输出：

 

6.配置文件，配置好入口和出口文件。

新建一个webpack.config.js放置在代码目录下

设置好entry和output路径，下次打包可以直接用webpack不用规定入口和出口

const path = require('path')
// 启用热更新的 第2步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要 放到 plugins 节点中去
// 这个插件的两个作用：
//  1. 自动在内存中根据指定页面生成一个内存的页面
//  2. 自动，把打包好的 bundle.js 追加到页面中去
//const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
  // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  }
}

7.连webpack都不想键入打包，而是修改原js文件后就自动打包，那么需要用到webpack-dev-server工具。

首先，在本地下npm init -y

之后运行sudo npm i webpack-dev-server -D

但是总是报错，于是指定版本2.9安装

sudo npm i webpack-dev-server@2.9.3 -D

8.修改项目下的package.json,在script里面添加“dev”

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jquery": "^3.3.1",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^2.9.3"
  }
}

至此，所有都配置好了。

在命令行运行

npm run dev

此时会开启server，一直监听，当你的main.js有改变，则马上提交编译出来新的bundle.js

但是，当修改main.js的时候还没有成功，查了一下，是因为

https://segmentfault.com/a/1190000006670084

webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹

也就是说，并没有按照我们在config文件下设置的输出路径下保存，所以index.html引用的js路径是不对的

可以看到，截图里，现在的代码是可以在localhost:8080/src/中看到，而对应编译的bundle在http://localhost:8080/bundle.js中看到。

因此，修改index.html引用的js路径为 <script src="/bundle.js"></script>

此时打开index.html的绝对路径是无效的，必须在服务器上开启，也就是localhost上看到我们做的页面效果，当修改了js文件，实时会进行刷新。那么原先dist下的bundle也就没有意义了，可以删除。

 

9.配置其他选项，在dev后面添加一些配置

a.默认打开浏览器，加入--open

b.用3000端口，加入--port 3000

c.默认打开页面 --contentBase src

d.无刷新热重载 --hot

热重载可以不重新生成一份bundle.js，打了一个像补丁一样的更新代码，只用了少量更新，这个对性能是一个好方法。

特别是后面涉及css后，不用刷新，异步重载。

"dev": "webpack-dev-server --open --port 3000  --contentBase src --hot"

 

10.把html也放到内存中去，而不是在物理磁盘里

npm i html-webpack-plugin -D安装这个插件

作用：（1）自动在内存中生成一个html页面

（2）自动把打包对bundle.js追加到页面中去，不需要在html中引用

配置文件：

const path = require('path')
// 启用热更新的 第2步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要 放到 plugins 节点中去
// 这个插件的两个作用：
//  1. 自动在内存中根据指定页面生成一个内存的页面
//  2. 自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
  // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  },
  plugins: [ // 配置插件的节点
    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
    new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
      template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
      filename: 'index.html' // 指定生成的页面的名称
    })
  ]
}

 

 

这部分这两天踩了很多大坑，最后还是归结于版本问题，现在只能用不是最新版的webpack和webpack-dev-server。

成功的版本上面代码里有提到。

下一步还会继续学习它的配置文件。

 

感谢前天一个朋友的留言，希望我可以坚持。

I will.