webpack安装和命令行

最新推荐文章于 2024-05-08 10:58:00 发布

学习笔记666

最新推荐文章于 2024-05-08 10:58:00 发布

阅读量6.3k

点赞数 4

分类专栏： webpack深入与实战

本文链接：https://blog.csdn.net/github_26672553/article/details/59058184

版权

webpack深入与实战专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、进入我们的项目目录webpack-test，初始化npm

npm init

执行这个命令，会要求我们输入name、version、description等，也可以不填，一路回车。
最后会在目录下生成一个package.json文件（我们现在不介绍这个文件）。

2、安装webpack

npm install webpack --save-dev

这命令执行完成之后，我们的webpack-test目录下，会多一个node_modules文件夹。

3、小试牛刀（看看webpack打包到底是个啥）

在根目录下新建一个hello.js文件，代码如下：

//这里代码不重要，只是为了演示
function hello(){
    alert('hello');
}

hello();

然后我们用webpack来打包这个hello.js文件，看看打包之后是个啥。
执行命令：

webpack hello.js hello.bundle.js
#webpack [要打包的文件名] [打包之后的文件名]

执行上面打包命令成功之后，终端会提示如下内容：

Hash: ffb542f388f3028d0787
Version: webpack 2.2.1
Time: 59ms
          Asset     Size  Chunks             Chunk Names
hello.bundle.js  2.58 kB       0  [emitted]  main
   [0] ./hello.js 66 bytes {0} [built]

我们来解释一下什么意思：Asset指这次打包之后的文件名，Size这次打包之后文件的大小，Chunks这次打包的分块。

我们可以来看一看，打包生成的这个hello.bundle.js文件，我们发现看不懂，只看到最后有我们的hello.js的代码了：

/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

//这里代码不重要，只是为了演示
function hello(){
    alert('hello');
}

hello();

/***/ })
/******/ ]);

4、提升

在根目录新建一个word.js，代码如下：

function word(){
    return {}; //返回了一个空对象
}

现在我们希望在hello.js文件中，去引用这个word.js。

//引用其他文件
require('./word.js')

function hello(){
    alert('hello');
}

hello();

再次执行webpac打包命令：

webpack hello.js hello.bundle.js

没有报错，竟然没有报错。我们竟然可以使用require了，要知道这在原生js里可不行的。

5、webpack如何处理css文件？

新建一个style.css文件，代码如下：

html,body{
    margin: 0;
    padding: 0;
}

下面我们来看如何在js文件中引用css文件：

//引用其他文件
require('./word.js')
require('./style.css'); //匪夷所思，怎么可以在js里引入css

function hello(){
    alert('hello');
}

hello();

能在js文件里引用css文件，这太领我们匪夷所思了。果然我们再次执行webpack打包命令，发现报错啦：

//......
You may need an appropriate loader to handle this file type.
//........

根据提示是说我们需要合适的loader来处理css这个类型的文件。

6、安装需要的loader

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

其实除了css-loader，我们还需要style-loader，它们是一起使用的。

OK，我们已经安装了这2个loader，但是还没有完，我们还需要指定这2个loader。

require('style-loader!css-loader!./style.css');

我们在引入css文件的时候，指定这2个loader。(注意语法)
好了，我们再次执行webpack打包命令，就不会报错了。

我们可以新建一个html模板文件，然后引入我们打包生成的hello.bundle.js，测试一把。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"
        <title>webpack-test</title>
    </head>
    <body>
        <script src="hello.bundle.js"></script>
    </body>
</html>

7、css-loader和style-loader

还记得我们前面是这样引入css文件的吧

require('style-loader!css-loader!./style.css');

这表示：先用css-loader来处理css文件，然后style-loader接着处理。
style-loader就是把css-loader处理完的内容，新建一个标签(style)，插入到我们的html模板里面。
比如，前面的例子，我们的html模板文件在引入hello.bundle.js之后，我们通过浏览器观察源码，我们会发现在html的head标签内，会多了如下代码：

<style type="text/css">html,body{
    margin: 0;
    padding: 0;
}</style>

8、每修改一下都要重新打包，这样是不是太麻烦了。

我们可以在打包的是，给加一个参数

webpack hello.js hello.bundle.js --watch

执行上面命令，我们发现终端进入『等待』状态，以后我们在修改文件，就不必再次打包了。
这就是实现了自动打包，

学习笔记666

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
webpack安装和命令行

1、进入我们的项目目录webpack-test，初始化npmnpm init执行这个命令，会要求我们输入name、version、description等，也可以不填，一路回车。最后会在目录下生成一个package.json文件（我们现在不介绍这个文件）。2、安装webpacknpm install webpack --save-dev这命令执行完成之后，我们的webpack-test目录下，会
复制链接

扫一扫