webpack笔记

前端►javaScripts

今天想了解一下webpack，但找了网上的一系列教程，都会或多或少出现一些不明报错，实在恼火，经过几番简化，终于用最简单的方法使用了webpack，在此记录一下

一. 环境配置

1.首先，安装Node.js，这里不赘述，未接触nmp的童鞋可以参考Node.js安装配置

2.在cmd中输入

1
npm install webpack -g

3.在自己测试的位置创建一个新的文件夹，命名webpack_demo

4.进入刚刚所创建的文件夹webpack_demo，按住shift键同时点击鼠标右键(即打开cmd并进入webpack_demo文件夹)

5.在打开的命令窗口键入：npm init，根据提示填写信息，name表示项目名，version表示版本等等，不一一赘述了，也可使用默认值，一路回车即可，最后出现“is this ok?”时，敲击回车键，webpack_demo文件夹便生成了package.json文件夹

二. 构建webpack项目

  1. 安装webpack

    1
    2
    3
    4
    5
    依次执行如下命令：
    1.npm install -g webpack; //全局安装webpack
    2.npm install webpack --save-dev; //安装关联到项目目录
    3.npm install webpack-cli -g; //此工具用于在命令行中运行 webpack
    4.npm install webpack webpack-cli --save-dev;

  2. 在webpack_demo文件夹下创建webpack.config.js文件，此文件为webpack的配置文件。具体内容如下：

1
2
3
4
5
6
7
8
9
//webpack.config.js
module.exports={
	entry:'./src/js/entry.js', //页面入口文件
	//输出文件
	output:{
		filename:'index.js',	//输出文件名
		path:__dirname+'/out',	//输出文件路径
	}
}

参数简单说明：

  • entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）

  • output：对应输出项配置

    • ​ path ：入口文件最终要输出到哪里，
    • ​ filename：输出文件的名称
    • ​ publicPath：公共资源路径

3.devServer 构建本地服务器：让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。

1
npm install webpack-dev-server --save-dev

配置服务器：

服务器配置可以在 webpack.config.js 中配置

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
	……
	//devServer 构建本地服务器
	devServer: {
		contentBase:'./public',  // 不设置会以根目录作为服务器目录
		historyApiFallback:true, //不跳转
		inline:true,//实时刷新
		hot:true //热更新
		port: 8080	//默认端口，不设置则用8080
	},
}

运行并自动打开浏览器

在 package.json 文件 的 scripts 中进行配置：

1
2
3
4
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack serve --open Chrome.exe",
}

注意：webpack-dev-server 与 webpack 存在版本冲突，单纯使用 webpack-dev-server 命令会报错

执行 npm run start 即可在浏览器中打开

4.接着，我们在创建一些基本的文件保存路径，我们这里创建网页中最基本的一些文件夹

3.接下来我们在index.html，和entry.js中填充点内容

1
2
3
4
5
6
7
8
9
10
11
12
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
</head>
<body>
<div>hello world</div>
<script type="text/javascript" src="./out/index.js"></script>
</body>
</html>
1
2
// entry.js
document.write('呵呵到天亮');

4.完成以上操作，我们可以来试试效果了，在刚才所打开的cmd窗口中输入webpack （假如已经关闭，按上面第4步操作即可）

下面WARNING in configuration原因及解决办法可点击链接：https://blog.csdn.net/lgx1134569285/article/details/87986317

5.看到上面 的一幕，恭喜你，已经成功了，我们再进一步验证一下，

目录下多了一个out文件夹，out文件生成了我们所命名的index.js

打开内容如下

打开index.html文件，结果不仅打印出html文件中的”hello world”，js中的打印123也生效了

(ps：这里打印中文时假如出现乱码，记得在html文件的标签添加编码)

呵呵到天亮

游戏前端一枚。