webpack笔记

Step 1: 首先安装Node.js, 可以去Node.js官网下载.

Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中
npm install webpack -g

Step3: 使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
npm init

接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件[图片上传中。。。(2)]这样webpack就安装完成了.

Step4: 在src的js下创建一个入口文件, 我创建的叫做bundle.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件,

module.exports={
    entry:"./main.js",//入口文件
    output:{//输出文件
        filename:'bundle.js',//输出文件名
       // path:__dirname + '/out'//输出文件路径//
    }
}

webpack 查看是否生成bundle.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   // <script type="text/javascript" src="./bundle.js"></script>//注意在这里引入的是打包完成的js文件
  <script type="text/javascript" src="./out/bundle.js"></script>//注意在这里引入的是打包完成的js文件 
</body>
</html>

npm install live-server -g 安装服务器

live-server 启动服务器

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容