webpack的使用入门笔记

1.webpack 的使用

1.1先创建一个目录，再创建如图一下的文件

1.2在项目根目录中运行 npm i webpack --save-dev 安装到依赖项目中

1.3使用命令 npm init 初始化项目
1.4使用 npm i 库名 --save 安装各依赖库
1.5在main.js里面编写我们的函数

1.6. 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；

webpack 打包 main.js 到 dist 中

2.1 webpack version 4.0以上使用 webpack ./src/main.js ./dist/bundle.js 会出错

在控制台可以看到main.js已经成功打包到 dist中去了，但是实际上是没有成功的,原因是版本过高了，原来的命令已经不适合用了。
把原来的命令改为 webpack ./src/main.js -o ./dist/bundle.js

可以看到打包已经成功了,(自动忽略警告)

2.2我们每次写完main.js 都要 执行一下 webpack ./src/main.js -o ./dist/bundle.js 命令 ,这样很麻烦。
这个时候我们可以在根目录创建一个文件名为：webpack.config.js

2.3在这个文件里面我们要指定入口和出口，
入口就是要打包的文件；出口就是要打包到那里的文件。

2.4有时候hbuilder不能将join识别成一个函数这时候配置文件可以改成下面的样子。

2.5这时候再运行命令 webpack 结果如下

2.6每次修改代码后，都要运行一下webpack命令，这样太麻烦了，所有引出了
webpack-dev-server，来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。

3.webpack-dev-server

3.1. 运行*cnpm i webpack-dev-server --save-dev*安装到开发依赖

3.2. 因为 webpack-dev-sever是本地项目安装的，所以无法全局运行，假如运行会出现一下错误。

3.3. 这时候就要去 package.json添加一个命令
“dev” : “webpack-dev-server”

3.4再次运行命令 npm run dev

3.5 这时候我们每一次修改完代码后，它都会帮我们自动打包

3.6.这时候我们要查看我们自己的网页 已经是不像以前那个样子直接打开了，而是要通过它开启的服务地址打开。

3.6这个时候访问webpack-dev-server启动的**http://localhost:8080**/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件（bundle.js放在内存里面了），需要修改index.html中script的src属性为:<script src="../bundle.js"></script>

3.7修改引用bundle.js的引用路径，这时候就能实时刷新了。（不用刷新浏览器）

3.8 加一个参数 --open 在dev 里面，每次运行 npm run dev 都会自动打开浏览器
也可以加个命令打开指定窗口（–port 8888）


3.9 为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录

3.91 现在每次运行 npm run dev 的命令都是讲main.js重新打包成bundle.js文件，这样太浪费时间了，这个时候可以 加个指令 --hot 热加载，它可以每次打包都是修改过的文件。

3.92.由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.（先安装 html-webpack-plugin插件）

// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
**var htmlWebpackPlugin = require('html-webpack-plugin');**

module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    },
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ]
}

将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！
内存里面的页面（自动帮我们引用bundle.js）

硬盘上的页面。