webpack——基本安装(一)

最新推荐文章于 2022-07-04 15:26:36 发布

我是一个脸

最新推荐文章于 2022-07-04 15:26:36 发布

阅读量204

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_20464593/article/details/106296258

版权

webpack 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

webpack基本安装
首先我们创建一个目录，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）

npm init -y
npm install webpack webpack-cli --save-dev

创建以下目录结构、文件和内容：
在这里插入图片描述
src/header.js

function Header() {
    var dom = document.getElementById("root")
    var header = document.createElement("div")
    header.innerText = "header"
    dom.appendChild(header)
}
export default Header

src/content.js

function Content() {
    var dom = document.getElementById("root")
    var content = document.createElement("div")
    content.innerText = "content"
    dom.appendChild(content)
}
export default Content

src/sidebar.js

 function Sidebar() {
    var dom = document.getElementById("root")
    var sidebar = document.createElement("div")
    sidebar.innerText = "sidebar"
    dom.appendChild(sidebar)
}
export default Sidebar

src/index.js

import Header from './header'
import Content from './content'
import Sidebar from './sidebar'

new Header()
new Content()
new Sidebar()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原始网页</title>
</head>
<body>
    <p>网页从这里开始</p>
    <div id="root"></div>
    <script src="./src/index.js"></script>
</body>
</html>

还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。
package.json

{
  "name": "lesson0523",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

手动打开页面index.html,
页面上并没有显示出所有内容:
在这里插入图片描述
原因是浏览器并不会识别像import这样的语句,这里就需要对index.js进行打包。

命令行运行:

npx webpack

将生成一个dist目录,dist下的main.js文件就是打包生成的文件。(将我们的脚本作为入口起点，然后输出为 main.js)
并将index.html移动到dist目录下,修改一下index.html中js文件的引用路径:

<script src="./main.js"></script>

打开index.html,则出现所有内容:
在这里插入图片描述
webpack初体验 ok~
到这里,我们可以理解webapck能识别import,它的核心是模块打包工具,而上面代码中Header、Conetent和Sidebar都是一个模块。

补充:
上述代码import引入方式是ES Module 模块引入方式

import Header from './header.js'
import Sidebar from './sidebar.js'
import Content from './content.js'

除了ES Module,模块规范还有: CommonJS,CMD和AMD, webpack依然能识别

// CommonJS规范,使用require导入模块
var Header = require('./header.js')
var Sidebar = require('./sidebar.js')
var Content = require('./content.js')

而相对应的,导出模块应该为:

 // CommonJS 模块导出方式
module.exports = Header
module.exports = Content
module.exports = Sidebar

我是一个脸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack——基本安装(一)

webpack基本安装首先我们创建一个目录，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）npm init -ynpm install webpack webpack-cli --save-dev创建以下目录结构、文件和内容：src/header.jsfunction Header() { var dom = document.getElementById("root") var header =
复制链接

扫一扫

专栏目录