Webpack4.x安装与使用入门

最新推荐文章于 2025-02-05 22:46:43 发布

Winne_Shen

最新推荐文章于 2025-02-05 22:46:43 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： webpack 打包 webpack-cli

本文链接：https://blog.youkuaiyun.com/Winne_Shen/article/details/79631832

版权

前端专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了如何使用Webpack搭建项目，包括全局安装、初始化项目、安装依赖、配置文件创建及打包过程。适合初学者快速上手。

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

安装

在全局安装webpack

npm install -g webpack

创建项目

创建新文件夹webpack-study，用于存放项目。命令行定位到该文件夹下。输入以下命令进行初始化。

npm init

然后根据项目情况配置选项或直接回车。

此时发现在该文件夹内新增了一个package.json文件。

安装webpack依赖包

npm install --save-dev webpack

此时多了node_modules文件夹。

在webpack-study文件夹下创建两个文件夹，app和public。

并分别创建以下文件。

module.exports = function() {
	let greet = document.createElement('div');
	greet.textContent = 'Hi winnw!';
	return greet;
}

const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

<!DOCTYPE html>
<html>
<head>
	<mata charset="utf-8">
	<title>my first webpack</title>
</head>
<body>
	<div id="root">
		hello world!
	</div>
	<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

创建webpack.config.js

// __dirname是node.js的全局变量，它指向当前执行脚本所在的目录。
module. exports ={
  devtool: 'eval-source-map',
  entry:__dirname + '/app/main.js',
  output:{
    path:__dirname+'/public',
    filename:'bundle.js'
  },
  mode:'development',
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } /*,
  module:{
    loaders:[
    {
      test:/\.css$/,
      loaders:['style-loader','css-loader']
  	}
  	]

  }*/
}

打包

webpack

低版本的webpack可能可以成功，但我的版本是4.x，提示以下信息：

The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D

由于我们的webpack是安装在全局，因此webpack-cli也装到全局。