淘先锋技术网

首页 1 2 3 4 5 6 7

webpack简介

  • 安装webpack、webpack-cli

#初始化项目
npm init 或者 yarn init
#安装webpack webpack-cli
npm i webpack webpack-cli -g

  •  打包以一个应用

目录下新建index.js 和 addContent.jsxi

#index.js
import addContent from "../add-content.js"
document.write('My First webpack app</br>')
addContent()

#addContent.js
export default ()=>{
    document.write("hello word")
}

新建index.html 

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
</body>
<script src="./dist/build.js">

</script>
</html>

  •  打包命令

npx webpack --entry=./index.js --output-filename=build.js --mode=development

参数解析：

        entry:资源打包入口。webpack从这里开始进行模块依赖的查找。得到项目中包含index.js和add-content.js两个模块，并通过他们生成最终产物。

        output-filename:输出资源名。你会发现打包完成后工程中出现了一个dist目录，其中build.js就是webpack最终产物.

        mode:打包模式。webpack提供了development、production、none三种模式。当置于development和production模式下时，它会自动添加适合与当前模式的一系列模式。

为了验证打包结果，浏览器打开index.html项目中的index.js和content.js现在已经成为了build.js,被页面加载和执行，并输出了内容。

  • 使用npm script

每次打包都输入一段很长的命令。这样不仅耗时还容易出错，我们可以在package.json中添加一段脚本命令 

"scripts": {
    "build":"webpack --entry=./index.js output-filename=build.js mode=development"
  }

运行npm run build 重新执行打包

  •  使用默认配置项

在工程中webpack 的默认的源代码入口就是src/index.js因此可以省略掉entry的配置了

"scripts": {
    "build":"webpack output-filename=build.js mode=development"
  }

  •  使用配置文件

 从之前我们在package.json 中添加脚本命令来看，当项目需要越多越多的配置时，就要往命令中添加更多的参数，那么后期维护就很困难，为了解决这个问题，可以把这些参数专门放在一个配置文件中，webpack的默认配置文件为webpack.config,js,现在让我们在工程目录下创建webpack.config.js文件并添加如下代码 a

module.exports={
    entry:"./src/index.js",
    output:{
        filename:"build.js"
    },
    mode:"development"
}

现在我们可以去掉package.json中的配置打包参数了

"scripts": {
    "build":"webpack"
  }