webpack初级入门教程（一）

最新推荐文章于 2023-09-25 01:59:49 发布

vip.khan

最新推荐文章于 2023-09-25 01:59:49 发布

阅读量415

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端教程文章标签： webpack

本文链接：https://blog.youkuaiyun.com/vipsongtaohong/article/details/102842219

前端教程专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何从零开始搭建Webpack环境，包括安装Node.js、cnpm、Webpack，配置Webpack，使用Webpack构建本地服务器，以及集成Babel和CSS模块等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前提条件
检测电脑是否安装node环境、npm、cnpm
检测：
node：node -v
npm： npm -v
cnpm：cnpm -v
2.安装环境
2.1安装node环境：双击node安装包
2.2node环境安装完了以后再次检测node -v、npm -v
2.3安装cnpm（淘宝镜像）npm install -g cnpm --registry=https://registry.npm.taobao.org
2.4检测cnpm -v

3.安装全局webpack
cnpm install webpack@3.4.1 -g
4.新建一个文件夹webpackdome作为项目文件夹
5.初始化项目cnpm init -y 在webpackdome中生成了package.json
6.再在webpackdome中安装一个局部的webpack
cnpm install webpack@3.4.1 -D

7.webpackdome中创建两个文件夹app和public

8.再创建三个文件
index.html---放在public文件夹中(用<script src="bundle.js" type="text/javascript" charset="utf-8"></script>引入bundle.js这个是打包后自动生成的文件)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 引入打包后的文件 -->
		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

Greeter.js---放在app文件夹中

// 导出模块(导出这个函数)；exports（导出）
module.exports=function(){
    // 创建一个节点
    let greet=document.createElement("div");
    // 给创建的节点赋值
    greet.textContent="你好！再见asasasd";
    //把创建的节点作为返回值
    return greet
}

main.js---放在app文件夹中

//导入Greeter.js文件
const greeter=require("./Greeter.js");

// 把Greeter.js文件中返回值(这里的返回值是一个节点)添加到页面上
document.querySelector("body").appendChild(greeter())

9.打包
webpack 入口文件路径打包后生成的文件存放路径
webpack app/main.js public/bundle.js
打包成功后运行index.html

10.新建配置文件webpack.config.js放在根目录下，内容如下：

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
}

有了这个文件只需要在cmd中运行webpack这个命令就可以打包了

11.设置start快捷方式
在package.json中的scripts中添加"start": "webpack",

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

直接在cmd中运行cnpm start就可以进行打包

12.使用webpack构建本地服务器

安装：cnpm install --save-dev webpack-dev-server@2.9.3

在webpack.config.js中新增内容如下：

module.exports = {
	devtool: 'eval-soure-map',
	entry: __dirname + "/app/main.js",
	output: {
		path: __dirname + "/public",
		filename: "bundle.js"
	},
	devServer: {
		contentBase: './public',
		historyApiFallback: true,
		inline: true
	},
}

再在在package.json中的scripts中添加 "server": "webpack-dev-server --open"

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

最后在cmd中运行cnpm run server就可以在浏览器中运行端口 http://localhost:8080

13.babel是一个js的编译平台

安装：cnpm install --save-dev babel-core babel-loader babel-preset-env

配置：

module.exports = {
	devtool: 'eval-soure-map',
	entry: __dirname + "/app/main.js",
	output: {
		path: __dirname + "/public",
		filename: "bundle.js"
	},
	devServer: {
		contentBase: './public',
		historyApiFallback: true,
		inline: true
	},
    //新增
	module: {
		rules: [{
				test: /(\.jsx|\.js)$/,
				use: {
					loader: "babel-loader",
					options: {

					}
				},
				exclude: /node_modules/
			},
		]
	}
}

babel-core babel-loader因为版本冲突会报错，安装@babel-core可以解决问题cnpm i @babel/core -D

14.模块

14.1.css模块

安装：

cnpm install --save-dev style-loader css-loader

配置：

module.exports = {
	devtool: 'eval-soure-map',
	entry: __dirname + "/app/main.js",
	output: {
		path: __dirname + "/public",
		filename: "bundle.js"
	},
	devServer: {
		contentBase: './public',
		historyApiFallback: true,
		inline: true
	},
	module: {
		rules: [{
				test: /(\.jsx|\.js)$/,
				use: {
					loader: "babel-loader",
					options: {

					}
				},
				exclude: /node_modules/
			},
            //新增
			{
				test: /\.css$/,
				use: [{
						loader: "style-loader",
					},
					{
						loader: "css-loader",
					},
				]
			}
		]
	}
}

使用css模块：

在app文件中新建style.css，内容如下

.hello{
	color: red;
}

在Greeter.js中给创建的div添加一个class类名，内容如下


// 导出模块(导出这个函数)；exports（导出）
module.exports=function(){
	// 创建一个节点
	let greet=document.createElement("div");
	// 给创建的节点赋值
	greet.textContent="你好！再见asasasd";
	//新增类名
	greet.className="hello";
	//把创建的节点作为返回值
	return greet
}

在main.js中引入style.css，内容如下

import "./style.css"//新增

//导入Greeter.js文件
const greeter=require("./Greeter.js");

// 把Greeter.js文件中返回值(这里的返回值是一个节点)添加到页面上
document.querySelector("body").appendChild(greeter())

15.删除webpack全局下删除npm uninstall webpack -g

安装命令：install

删除命令：uninstall