webpack初体验

来源：互联网发布：python中strip 编辑：程序博客网时间：2024/06/04 00:38

webpack初体验

研究了一星期的webpack，也没太用心，先记录一下学到的知识心得吧，说实话真的能学到很多东西!
本文参照网上众大神的webpack教程，引用的一些代码还请见谅！废话少说，正式开始！

核心的概念

引用官网的解释就是：
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

它是高度可配置的，而且你需要先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。附上地址：https://doc.webpack-china.org/concepts/

这么说，按我自己的理解就是，webpack就是一个打包的工具，不要过于深究它的原理是啥，它是给你工作带来方便的，又不是给你制造困难的，对吧，开始吧！

安装和配置

一. 安装

首先呢是装 node.js 这个就不说了吧，官网下载一直下一步就OK。

node -v 查看一下版本的同时也能看看是否安装成功。

如果想更新Node怎么办？

由于Node自带npm，所以装完Node后应该会有某个版本的npm，可以使用npm来更新Node。

npm install -g n

但npm相比Node更新更频繁，所以，要是想确保使用的是最新版本的，你可以执行以下命令：

npm install npm -g

安装完这些了，那接下来进入我们的主角登场时间：【安装webpack】

我们常规直接使用 npm 的形式来安装：

$ npm install webpack -g

嘿！是不是很慢，很无奈呀！木办法呀，国内墙了，自然就慢了，别着急，还有难倒“ 程序猿 ”的问题么，对不对？

【淘宝镜像】

npm install webpack --registry=http://registry.npm.taobao.org

每次这样敲么长一段，那不是烦死了啊！简化
为了避免每次安装都需要–registry参数，可以使用如下命令进行永久设置

npm config set registry http://registry.npm.taobao.org

这样就快多了！

安装是安装完了，然后呢？

2.配置

来吧，初始化吧
为什么？因为不初始化后续的操作会报错呀！

npm init

回车、回车、回车一路下去，没改的东西就是 Y；你会看见一个package.json文件

{  "name": "webpack",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "dependencies": {    "webpack": "^3.6.0"  }}

等等，我是不是忘了什么？对，在哪里写 npm init；

插入一下，顺便自我小提升一下cmd

cd      进入某个文件夹md      创建文件夹mkdir   同上cd ..   返回上一级

然后进入文件夹，比如我的是桌面上的example文件夹

进入文件夹  cd C:\Users\hj\Desktop\example初始化   npm init安装webpack依赖  npm install webpack --save-dev

在example文件夹下创建相关的文件夹目录，我的目录如下：

example  |- node_modules           //webpack依赖的文件包  |- package.json           //npm init 生成的项目信息文件  |- package-lock.json      //同上  |- webpack.config.js      //cli命令操作的简化的配置文件  |- /dist                  //文件输出目录    |- /html        |-index.html    |- /css        |-index.css    |- /js        |-index.js  |- /src                   //源文件目录    |- /css        |-module_1.css    |- /js        |-module_1.js        |-module_2.js

页面加入内容

其中，index.html的内容为

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>首页</title>    <link rel="stylesheet" href="../css/index.css"></head><body>    <script src="../js/index.js"></script></body></html>

src源文件目录下的module_1.js的内容为：

function module_1() {    var ele = document.createElement('div');    ele.innerHTML = "Hello webpack";    return ele;}document.body.appendChild(module_1());

看到这里，不知道大家有没有疑惑，”index.html” 中引用的 “index.js”文件明显不是src源文件目录下的js文件,但是dist文件下的“index.js”文件内又没有内容，这是什么情况呢？

别着急，我们还缺一个步骤没有进行呢！那么接下来就是webpack的打包过程了。

进入cmd命令行，敲击出一下cli命令：

webpack  ./src/js/module_1.js  ./dist/js/index.js

回车，咱们看一下dist文件下的index.js；现在是不是有内容了呢？在浏览器中打开index.html也可以发现我们在js中写的“Hello webpack”也显示在了页面上。

好，现在我们有了一个js源文件，这在开发中肯定是不够的，那多个js文件的时候怎么办呢？
我们接着再创建一个文件module_2.js

function module_2() {    var ele = document.createElement('div');    ele.innerHTML = "moudle_2 works";    return ele;}document.body.appendChild(module_2());

然后我们在module_1.js加入以下代码：

require('module_2.js');

现在再执行一下

webpack  ./src/js/module_1.js  ./dist/js/index.js

查看一下index.html，现在是不是 “moudle_2 works” 也出现在了页面上？

页面加入样式

那现在我们想加一些样式，怎么办呢？接着来，咱们在src目录下的index.css文件中加入一些简单的样式；

div{    font-size:15px;    color:#234567;    background:#ccc;}

然后呢？难道我们也是同样的cmd命令吗？难道是：

webpack  ./src/css/index.css  ./dist/css/index.css

试一试么，一试便知真相，报错了吧？我们看一下错误原因：

You may need an appropriate loader to handle this file type.您可能需要一个合适的加载器来处理这个文件类型。

也就是说，现在的webpack并不认识css文件类型对不对，那我们就让它认识!

由于webpack使用loader的方式来处理各种资源，比如现在我们要处理的样式文件，我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到所有的url(…)并且处理。style-loader会把所有的样式插入到你页面的一个style 标签中。

npm install css-loader style-loader --save-dev

阅读全文

0 0