webpack安装

超详细的记录——关于我咋安装的webpack

之前在安装vu-cli时有接触一点webpack，但是，我又都忘的差不多了。想着这次还是记录下吧也强烈建议大家边做边去记录
不仅能加深印象，还能温习一下相关的知识点，自己记录一遍后再看别人的博文也会容易看懂一点或者更亲切一点，当然写得很乱的博文除外哈哈。另外声明下这篇文章适合新手小白，大佬们可以绕道了。。。

在正式开始之前

首先要确保你的电脑上要安装了node和npm

大家可以打开终端，输入命令：node -v 查看版本号如果有对应的版本号说明安装了node

同样输入命令：npm -v 查看npm的版本号查看是否安装了npm

由于我在终端输了下命令查看了本机已经安装这俩，所以只能假定你们也安装了。

关于node和npm的安装可以自行百度~~

 

webpack安装

不废话了，吼吼，正式开始吧~

现在建立了一个test文件作为我的项目根目录去装我的代码啦

输入命令：cd test         // 进入test文件夹，也就是我的项目

输入命令：npm install -g webpack 或 sudo npm install -g webpack 

经常全局安装应该对sudo比较熟悉

如果不想全局安装webpack，可以输入命令npm install -g webpack --save 或 npm install webpack --save-dev 安装个本地的。

关于--save 和 --save-dev的区别，有兴趣的进https://blog.csdn.net/star0311/article/details/90899013

 

ok其实到这可以看到webpack已经安装成功啦，就是通过一个命令去安装

安装完成之后，你会发现，空空的test文件夹里多了一个 node_modules文件夹和package-lock.json

有人会发现为啥没有package.json，好吧要想这个文件，大家回到终端继续输命令： npm init

在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息

上面的其实就是填写对项目的描述，填写的描述会在后面生成的package.json文件中一一对应上

如果不写描述一直回车确认到最后，package.json就出来了~~~

 

webpack基础配置

进入根目录，建两个文件夹，分别为src和dist，源码准备存放在 src 文件夹，打包后文件准备存放在 dist 文件夹里

src下建一个index.js文件，代码如下：

console.log(1);
console.log(2);
console.log(3);

 

在dist文件夹下新建一个webpack.config.js文件，代码如下：

const path = require('path');

module.exports = {
    //入口文件
    entry: './src/index.js',
    //出口文件
    output: {
        //输出的路径，其中__dirname为node内置变量，绝对路径
        path: path.resolve(__dirname, 'dist'),
    }
}

 

然后在终端输入：webpack   就开始直接编译打包啦

但是有可能会遇到这样的情况需要安装webpack-cli

输入yes确定吧，不然每次输入webpack想去编译，都会弹出如下让你安装webpack-cli的提示

 

 

好吧 看到这一大坨我们需要找到关键字，比如error

如果看到下面的提示，就要全局安装了输入命令：sudo npm install webpack-cli -g 进行全局安装webpack-cli

运行成功后，有木有发现dist文件夹下多了个main.js文件

main.js这个就是通过webpack进行编译打包生成文件啦

原理很简单：就是webpack会去项目根目录中查找webpack.config.js的配置文件，也就是webpack.config.js只要放在项目根目录就能被找到，不信你把配置文件从dist文件夹移到src文件夹下试试，找到了后就干啥呢，对，解析执行，得到配置文件的配置对象，通过配置对象中指定的入口也就是刚刚配置的entry和出口output，然后进行打包构建。

现在已经完成最基础的配置，高级的配置可以在webpack.config.js里继续配置，比如像webpack吧，它自身只能对js文件进行打包，但是不可能只有js文件需要打包，这需要去进行高级的配置，比如对loader的配置以便于对不同类型的文件进行打包啦这些。。