带你从0到1了解webpack（二）

上一节都简单的搞了一下webpack，让你知道这个玩意到底干啥的
但是在正式的开发中，一般都会有更复杂的配置，比如指定打包的输入路径和输出路径

在webpack 4.x的版本中

默认打包的入口是在src下的`index.js`文件
默认的打包的出口是在dist下的`main.js`文件

打开项目，在webpack.config.js中，配置下面的代码

const path = require('path')
module.exports = {
	entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'text.js' // 输出文件的名称
    }
}

ok，再npm run dev一下

dist目录下生成了一个叫做text.js的文件，这个文件和在output下配置的文件名一致
重新在src下引入这个新生成的text.js，运行一下代码，表格隔行变色依然生效

二，如何配置自动打包

实际开发项目中，不可能每次修改文件，保存以后都去运行一遍npm run dev这样子肯定会被当场砍死，所以，自动打包就成了必须

1. 运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
2. 修改package.json的script命令

"script": {
	"dev" : "webpack-dev-server" // 把之前dev下的webpack换成webpack-dev-server
}

3. 修改index.html引入js的路径，换成绝对路径/text.js
4. 重新运行指令npm run dev
5. 点击localhost:8080链接进入页面

OJBK，尝试在js页面改动一些东西，保存，就能实时刷新了

这个地方打包以后，有2个点要注意

1. webpack-dev-server会启动一个实时打包的http服务器
2. webpack-dev-server打包生成的输出文件，默认放到了根目录中，而且是虚拟的，看不见的，所以在目录文件找不到打包好的文件

三，生成预览页面

在上面，我们npm run dev 以后，发现点击进入localhost:8080并不是自己写的这个页面，需要点击相对的文件，才能进入到我想要的页面，现在我想只要运行命令，打开文件就可以直接到我写的那个页面去

配置一下html-webpack-plugin就可以了，将src的index.js复制到根路径

1. 运行 npm install html-webpack-plugin -D指令
2. 修改webpack.config.js的配置信息

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
	template : '/src/index.html', // 指定要用到的模板文件
	filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录不显示
})

3. 修改webpack.config.js向外暴露的配置对象，新增如下配置节点

module.exports = {
	plugins: [ htmlplugin ] // plugins数组是wbpack打包期间会用到的一些插件
}

运行，生效，OJBK