Webpack安装入门实例应用

最新推荐文章于 2021-10-06 19:41:33 发布

五彩城

最新推荐文章于 2021-10-06 19:41:33 发布

阅读量127

点赞数 1

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43769878/article/details/109742213

版权

本文是一篇Webpack入门教程，介绍了Webpack的基本概念，包括安装方法、应用实例，详细讲解了如何配置Loader处理非JavaScript文件，以及运用Plugins进行优化。文中还涉及到模块热替换（Hot Module Replacement），使得在开发过程中可以实时更新项目。最后，提供了参考资料以供深入学习。

摘要由CSDN通过智能技术生成

Webpack

打包Javascript应用程序的静态模块打包器

入口

从那个js模块入口开始打包，构建内部依赖
出口

将打包的js输出到指定出口环境位置
Loader

处理非JavaScript文件，将所有类型的文件转换为webpack能够处理的有效模块
plugins

插件实现loader不能解决的类型，优化打包压缩
模式

开发模式

生产模式

安装方法

本地安装

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

全局安装

npm install --global webpack

应用实例

在开始前要检验Node.js配置环境

npm -v
node -v

在终端中应该显示出版本号

新建一个文件夹mkdir webpack_demo

在终端窗口使用cd webpack_demo命令进入到新建的文件夹下

初始化一个项目 npm init -y

安装webpack

npm install webpack webpack-cli --save-dev

这里安装了webpack与webpack-cli(命令行运行webpack的工具) 因为4版本往上webpack-cli已经独立出来了

安装完成后项目文件夹下会多一个node_modules文件夹和package.json文件

在package.json文件里加上一句话

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

这样的话方便我们使用npm命令打包

新建一个专门用来保存代码的文件夹src，在它下面创建一个index.js文件

在里面我们就简单的写一句话console.log("hello");

然后我们在webpack_demo文件夹下新建一个webpack的配置文件webpack.config.js