webpack入门

最新推荐文章于 2024-05-02 23:09:04 发布

机智小铛铛i

最新推荐文章于 2024-05-02 23:09:04 发布

阅读量547

点赞数 2

本文链接：https://blog.csdn.net/qq_37110098/article/details/79184793

版权

本来是想看看vue的入门，结果发现vue依赖于webpack，所以只好先来安装webpack，简单了解一下，emmmm，然后，在安装webpack的时候又发现需要安装node.js，需要用到npm，emmmm然后又安装了node。。。。艰辛的前奏貌似才结束（因为还不知道后边又会需要安装什么玩意。。。噗）

安装node.js

网址：https://nodejs.org/en/

1、下载并安装（安装基本就是一直下一步下一步（next）就好，好像也就改了存储地址，再也没改啥，如遇到有更多问题，emmmm，动动大手找找度娘。）

2、检查

在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

输入 node -v 显示node.js的版本说明已经安装成功
输入 npm -v 显示npm版本说明npm也已经安装成功

说明一下：npm不需要专门安装，Node.js自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

（如安装出现问题，具体问题具体百度，或者重新安装，我自己安装的时候npm安装不合适，重装node后合适了。）

安装完成后的目录如下：

关于配置环境变量，emmm，新版本都不需要设计环境变量了，软件会自动写入环境变量。旧版本配置的话自行百度吧。。。emmm和java的环境变量配置雷同

3、测试，安装模块

配置完后，打开cmd窗口，输入命令进行模块的全局安装：
比如：我们就安装最常用express模块，命令如下：
npm install express -g
-g是全局安装的意思
(就不上图了，因为忘了截图2333333)

嗯，没错，到这里。。。我们的node安装才差不多结束，如果有小伙伴安装途中遇到什么乱七八糟的问题，动动大手找找度娘。。

安装webpack

安装完node安装webpack就很简单了
依旧【win+R】输入cmd打开命令行，现在我们已经有了npm，所以我们就输入npm install webpack -g 来安装webpack
webpack安装.png
emmm，出来两个WARN，不晓得什么原因，不过百度过之后说WARN 不影响使用，所以暂时就先不管这两个警告，后边出现问题在解决吧。
安装好webpack之后我们可以输入命令webpack -h看看是否安装成功，出现结果如下：
webpack命令.png
由于 npm 网址在国外，安装速度慢，我们可以使用淘宝的镜像及其命令 cnpm
输入命令npm install cnpm -g 安装淘宝镜像
再使用 cnpm 安装 webpack：
使用命令cnpm install webpack -g安装，其实也就是把刚才npm安装的webpack转移到cnpm的目录下

创建项目

接下来我们简单创建一个目录 app试用一下webpack：
mkdir app
在 app 目录下添加 runoob1.js 文件，代码如下：
document.write("It works.");
在 app 目录下添加 index.html 文件，代码如下：

    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

接下来我们使用 webpack 命令来打包：
webpack runoob1.js bundle.js
执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：

Version: webpack 3.10.0
Time: 140ms
    Asset    Size  Chunks             Chunk Names
bundle.js  2.5 kB       0  [emitted]  main
   [0] ./runoob1.js 28 bytes {0} [built]

浏览器输出

创建第二个 JS 文件

接下来我们创建另外一个 js 文件 runoob2.js，代码如下所示：
module.exports = "It works from runoob2.js.";
更新 runoob1.js 文件，代码如下：
document.write(require("./runoob2.js"));
接下来我们使用 webpack 命令来打包：
webpack runoob1.js bundle.js
显示如下

网页显示：

警告！！！：小伙伴敲代码的时候细心点，，，千万别出错了，自己由于粗心路径整错了，找了好久好久找不到，求助学长，学长一语点破。。。

webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
接下来我们使用以下命令来安装 css-loader 和 style-loader。
cnpm install css-loader style-loader -g
执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。
接下来创建一个 style.css 文件，代码如下：

body {
    background: yellow;
}

修改 runoob1.js 文件，代码如下：

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

接下来我们使用 webpack 命令来打包：

在浏览器访问如下

配置文件

我们可以将一些编译选项放在配置文件中，以便于统一管理：
创建 webpack.config.js 文件，代码如下所示：

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件：

webpack 命令执行后，会默认载入当前目录的 webpack.config.js 文件。

插件

插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工。
webpack 自带一些插件，你可以通过 cnpm 安装一些插件。
使用内置插件需要通过以下命令来安装：
cnpm install webpack --save-dev

比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
修改 webpack.config.js，代码如下：
“`
var webpack=require(‘webpack’);

module.exports = {
entry: “./runoob1.js”,
output: {
path: __dirname,
filename: “bundle.js”
},
module: {
loaders: [
{ test: /.css$/, loader: “style-loader!css-loader” }
]
},
plugins:[
new webpack.BannerPlugin(‘菜鸟教程 webpack 实例’)
]
};
`` 然后运行:webpack`

打开 bundle.js，可以看到文件头部出现了我们指定的注释信息。

开发环境

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
webpack --progress --colors --watch

当然，我们可以使用 webpack-dev-server开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

安装 cnpm install webpack-dev-server -g