webpack的安装和命令行

最新推荐文章于 2023-10-27 08:00:00 发布

qq_26702033

最新推荐文章于 2023-10-27 08:00:00 发布

阅读量1.9k

点赞数

文章标签： webpack的安装和命令行

本文链接：https://blog.csdn.net/qq_26702033/article/details/79289371

版权

1.按住 `shift` ，`testwp`文件单击右键，`在此处打开命令窗口`,打开命令窗口。

2.初始化npm

npm init

3.安装webpack

npm install webpack --save-dev
npm init  //一路回车,这里要注意name最好不要取什么webpack，grunt，glup之类的，不然可能会爆refusing to install xxxx as a dependency of itself

//全局安装
npm install -g webpack
//安装到你的项目目录，最好制定一个版本号
npm install --save-dev webpack@3.4.0//安装指定版本号

这个命令执行完成后，testwp目录下，会多一个node_modules文件夹。
这里写图片描述

4.尝试用webpack打包项目

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

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

hello();

然后yogawebpack来打包这个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();

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

5.引入js文件

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

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

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

//引用其他文件
require('./word.js')//这个是commonjs语法，webpack支持AMD commonJS的引入语法

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

hello();

再次执行webpack打包命令：

webpack hello.js hello.bundle.js

6.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这个类型的文件。

7.安装需要的loader

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

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

现在我们安装了着两个loader，然后我们可以指定这两个loader。

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

我们在引入css文件的时候，指定这两个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>

8.css-loader和style-loader

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>

9.如果不想在引入文件时指定loader，也可以在命令行中指定loader

引入文件：

//require('style-loader!css-loader!./style.css')
require('./style.css')//比之前的写法少了loader

命令行：

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"

注意：这里必须用双引号，不然会报错！！！！
在命令行中指定loader

9.每次修改都要重新打包，这样太麻烦了。

我们可以在打包的时候加上一个参数：

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch

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

Webpack 常用命令总结

npm install webpack -g   // 全局安装webpack
npm init -y              //初始化默认的package.json文件
npm install webpack --save-dev   //下载webpack插件到node_modules 并在package.json文件中加上webpack的配置内容
webpack    //对项目进行打包

webpack   --watch   // 自动监控文件的改变
webpack  --display-modules  //打包时显示隐藏的模块
webpack  --display-chunks   //打包时显示chunks
webpack  --display-error-details  //显示详细错误信息  

npm install {whatever}-loader  --save-dev   //安装loader并将该loader配置到package.json文件中

注意

第一，安装的时候先要全局安装webpack 就是加上-g。

第二，文件名字不能重复webpack名字。

第三，windown下更改”css=style-loader!css-loader!” 是双引号

qq_26702033

关注

0
点赞
踩
2

收藏

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

1.按住 shift ，testwp文件单击右键，在此处打开命令窗口,打开命令窗口。2.初始化npmnpm init3.安装webpacknpm install webpack --save-devnpm init //一路回车,这里要注意name最好不要取什么webpack，grunt，glup之类的，不然可能会爆refusing to install xxx...
复制链接

扫一扫