前端项目-webpack-配置详解

前端项目-webpack-配置详解

---

目录

---

---

内容

---

1、配置打包的入口和出口

webpack的4.x版本默认约定:

• 打包的入口文件：src/index.js
• 打包的默认出口文件: dist/main.js

如果需要修改打包的入口与出口，可以在webpack.config.js中新增如下配置：

const path = require('path') // 导入node.js中处理路径的模块
module.exports = {
	entry: path.join(_dirname, './src/index.js'), // 打包入口文件
	output: {
		path: path.join(_dirname, './dist'), // 输出文件目录
		filename: 'bundle.js' // 输出文件名称
	}
}

修改后的webpack.config.js

	const path = require('path')
	module.exports = {
		mode: 'development', // 开发模式
		entry: path.join(__dirname, './src/index.js'), // 打包的入口文件
		output: {
			path: path.join(__dirname, './dist'), //输出文件目录
			filename: 'bundle.js' // 输出文件名
		}
	}

项目目录和结构同上一篇博文’前端项目-webpack-安装和基本配置‘

执行打包命令

	npm run dev

然后页面index.html中导js包改为./dist/bundle.js

	<script src="../dist/bundle.js"></script>

效果同上一篇博文：

2、配置webpack的自动打包功能

每次我们改动index.js中的样式之后，已经渲染的页面并不会自动更新样式，需要我们手动打包，刷新页面样式才会改变。这太浪费操作了，那webpack有没有自动帮我们打包的功能呢？

答案当然是有，需要借助webpack-dev-server模块，步骤如下：

1. 下载安装依赖

    npm install webpack-dev-server -D
   

2. 修改package.json中的scripts -> dev 如下：

    "scripts": {
    	"test": "echo \"Error: no test specified\" && exit 1",
    	"dev": "webpack-dev-server"
      },
   

3. 修改src/index.html导js包的路径

    <script src="/bundle.js"></script>
   

4. 运行npm run dev 命令，重新进行打包

• 打包过程如图2-1：

5. 浏览器中访问http://localhost:8080地址，查看效果

• 效果图示2-2：

6. 点开src，自动访问首页index.html,查看效果
7. 修改js中的样式，结束修改（离开当前编辑）或者保存页面自动更新样式

• 解析：
  • /bundle.js为网站http://localhost:8080根目录下，在内存中生成的js文件
  • 在浏览器中输入http://lcoalhost:8080/bundle.js查看打包生成的js内容
• 注意：
  • webpack-dev-server会启动一个自动打包的服务器

访问地址看到 的是目录结构，而不是我们想要的首页，那有没有办法解决呢？
看下面

3、配置生成预览页面

生成预览页面需要插件html-webpack-plugin

1. 下载安装依赖

    npm i 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数组是webpack打包期间会用到的插件列表
    	...
    }
   

• 修改后的webpack.config.js代码：

    const path = require('path')
  
    // 预览页面插件
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const htmlPlugin = new HtmlWebpackPlugin({
    	template: './src/index.html', // 指定用到的模板文件
    	filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
    })
  
    // 向外暴露的配置对象
    module.exports = {
    	mode: 'development', // 开发模式
    	entry: path.join(__dirname, './src/index.js'), // 打包的入口文件
    	output: {
    		path: path.join(__dirname, './dist'), //输出文件目录
    		filename: 'bundle.js' // 输出文件名
    	},
    	plugins: [htmlPlugin] // plugins数组是webpack打包期间会用到的插件列表
    }
  

4. 运行npm run dev 命令，访问http://localhost:8080,自动展示首页

效果同上，不在截图

目前为止，我们修改js代码，页面会自动刷新，但是当运行npm run dev的时候它不会帮我们自动打开浏览器，不能修改地址和端口等等，下面讲解自动打包配置

4、配置自动打包的相关参数

这里只介绍常用参数配置，详细的配置可参考博文：https://blog.csdn.net/franktaoge/article/details/80083317

在package.json->scripts->dev值后面添加如下配置：

	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"dev": "webpack-dev-server --open --hot --inline --ip 127.0.0.1 --port 8888"
	  },

• 解析
  • –open ：运行npm run dev ，自动打开浏览器，访问指定的地址
  • –hot:：热模块替换机制
  • –inline: 自动刷新
  • –ip： 配置IP地址
  • –port：配置端口号

重新运行 npm run dev，查看效果：

后记 ：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA