webpack入门创建一个简单的项目

最新推荐文章于 2024-05-05 12:23:53 发布

攻城狮YanGo

最新推荐文章于 2024-05-05 12:23:53 发布

阅读量2k

点赞数 1

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_39644462/article/details/104654868

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

开始前需要安装好 node npm(cnpm)

首先创建一个目录 one-webpack 并进入目录
初始化项目，命令如下

npm init

回车后会有一系列创建项目的提示，可以一路回车，后期可以修改，最后会创建一个package.json文件
安装依赖如果网络慢的可以用cnpm安装

npm install webpack --save-dev
npm install webpack-cli --save-dev

为什么安装webpack后还要安装webpack-cli呢？
因为在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。

创建webpack.config.js文件来配置webpack打包基本信息

// webpack.config.js
let path = require('path')

module.exports = {
  entry: './index.js',  //输入文件
  output: {
		path: path.join(__dirname, 'dist'),
		publicPath: '/dist/',  //输出路径
		filename: 'bundle.js' 输出文件
	}
}

创建index.js文件作为输入文件

//index.js
document.write('Hello webpack')

创建index.html文件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<script src="dist/bundle.js"></script>
</body>
</html>

安装本地运行环境 webpack-dev-server

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

修改package.js的script配置本地运行

关于webpack-dev-server的属性说明

–open 自动打开浏览器
–host 代表运行的域名可以输入127.0.0.1、locallost、本机ip，如果不配置默认是localhost，也可以通过127.0.0.1访问，但是不能通过本机ip访问。
–port 8888代表运行的端口号是8888，如果不配置则默认是8080。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start": "webpack-dev-server --open --host localhost --port 8888 --config webpack.config.js"
  },

启动项目

npm run start

**最后会自动打开浏览器运行 **

攻城狮YanGo

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
webpack入门创建一个简单的项目

开始前需要安装好 node npm(cnpm)首先创建一个目录 one-webpack 并进入目录初始化项目，命令如下npm init回车后会有一系列创建项目的提示，可以一路回车，后期可以修改，最后会创建一个package.json文件安装依赖如果网络慢的可以用cnpm安装npm install webpack --save-devnpm install webpack-...
复制链接

扫一扫