• 可能有很多的小伙伴对于这个Webpack既熟悉又陌生，有一些刚开始接触vue的小伙伴在对项目进行打包的时候经常会使用到npm run build来进行打包，但是却不了解Webpack里面复杂的配置和功能。
  • Webpack是一种前端资源构建工具，一个静态模块打包器，在Webpack看来，前端所有资源文件都会作模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源，Webpack官网上这张万年不变的示意图中其实也已经说明了一切。
  • 接下来我们就一起来学习一下Webpack的基本概念和配置流程。

  • Entry 入口指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

  • Output 输出指示Webpack打包后的资源bundles输出到哪里。

  • Loader Loader让Webpack能够处理那些非js文件。

  • Plugins 插件功能，可以用于打包优化和压缩，重新定义环境变量等功能。

  • Model 指示Webpack使用相应模式的配置，通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。

  1. npm init -y //初始化
  2. npm install webpack webpack-cli --save-dev //安装webpack
  • 在文件夹中的src文件夹新建一个foo.js文件
  1. //foo.js
  2. alert('你好呀 webpack')
  • 在文件夹中新建一个webpack.config.js文件
  1. //webpack.config.js
  2. var path = require('path');
  3. module.exports = {
  4.   mode: '`production`',//环境
  5.   entry: './src/foo.js', //打包入口
  6.   output: { //打包出口
  7.     path: path.join(__dirname, 'dist'), //打包后文件存放的位置
  8.     filename: '`index.js`',  //打包后文件生成的文件名
  9.   },
  10. };
  • 此时 文件目录是这样子的
  • 在package.json文件中添加如下命令
  1.   "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "build": "webpack"
  4.   },
  • 此时我们在终端输入npm run build命令就会将入口文件（entry）进行打包输出到（output）dist文件夹的位置
  • 此时的目录是这样的
  • 我们光看js是看不出效果的，在dist文件夹新建一个index.html页面引用该打包后的js文件试试
  1. index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>引用打包后的js</title>
  9. </head>
  10. <body>
  11.     <script src="./index.js"></script>
  12. </body>
  13. </html>
  • 打开该index.html 我们会发现效果已经出来啦！
  • 至此 一个最简单版的打包就完成了！！！
  • 我们来另外一个例子 在foo.js同个文件夹内创建一个称为 helloWebpack.js 的模块。
  1. //helloWebpack.js
  2. export default function () {
  3.     alert('hi webpack')
  4. }
  • 在foo.js引用它
  1. //foo.js
  2. import hello from './helloWebpack'
  3. hello()
  • 此时我们在终端输入npm run build命令 然后运行index.html文件。

版权声明：本文为vergilLu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/vergilLu/p/14656897.html