webpack安装及使用

最新推荐文章于 2022-11-01 10:02:29 发布

美美王子

最新推荐文章于 2022-11-01 10:02:29 发布

阅读量457

点赞数

分类专栏： react-js js webpack 文章标签：模块化 javascript webpack

本文链接：https://blog.csdn.net/A_xilixiaogui/article/details/78058846

版权

js 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

react-js

7 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

Webpack
什么是webpack：现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法：1、模块化，2、css预处理器等，通过这些改进大大提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
安装webpack：
1. 可以使用npm安装。
2. 在终端中转到该文件夹后执行下述指令就可以完成安装。（cmd）
```
    npm install -g webpack//全局安装
    //安装到你的项目目录
    npm install --save-dev webpack
```

使用webpack

先在本地新建一个空的文件夹（此处命名为webpack）;
在上述文件夹下创建package.json文件，可以使用npm init命令自动创建这个package.json文件
```
npm init
```
执行完这个命令后回车默认。

文件夹的目录如下

   ——app
   ——node_modules
   ——public
   ——package.json
   ——webpack.config.js

index.html放在public文件夹下；
main.js 放在app文件夹下。

package.json文件就绪，我们在继续安装Webpack作为依赖包，输入：
```
npm install --save-dev webpack
```
执行webpack -v 看是否安装好了webpack，

相关模块里的测试代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Test</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

// main.js 
var greet = document.createElement('div');
greet.innerHTML = "Hello World!";
document.querySelector("#root").appendChild(greet);

在终端使用webpack（在命令行运行下面语句）

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

# webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

查看效果打开index.html文件即可。

通过配置文件来使用webpack
在刚才的文件夹的根目录下建立一个webpack.config.js文件，代码如下
```
module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}
```
在终端运行webpack即可(非全局安装需使用node_modules/.bin/webpack)。webpack的配置文件最基本的就是入口及输出口的配置。
更快捷的执行打包任务
在package.json文件的script属性的start键的值写为“ webpack”，我们以后便可在终端直接执行
```
npm start
```

总结

现在的webpack4版本，已经将webpack的一些工具包归入webpack-cli中，所以我们还得安装webpack-cli，npm install webpack-cli。全局下安装则加一个 -g 。

以上，便实现了一个简单的webpack打包，webpack更强大的功能如source map 使调试更加容易、构建本地webpack服务器、loaders、babel等，请具体查看一位大牛的文章：http://www.jianshu.com/p/42e11515c10f

美美王子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack安装及使用

Webpack 什么是webpack：现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法：1、模块化，2、css预处理器等，通过这些改进大大提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
复制链接

扫一扫