2、webpack基础配置

我们需要安装webpack 还需要安装webpack cli

这两个都是我们的开发依赖

这里我们一般会加一个-D表示上线的时候不需要他们两个包

安装我们的webpack

先初始化一下，记住我们的安装依赖

我机器代码的路径：

D:\MyDemos\webpack4\webpack-dev-1

Ctrl+鼠标右键打开CMD窗体。输入

yarn init -y

初始化之后呢就可以安装我们所需要的两个包

我们使用yarn add去安装

yarn add webpack webpack-cli -D

-D:表示当前是开发依赖，上线的时候不需要。

安装好后就可以进入webpack的配置

webpack可以进行零配置，但是只要是零配置，就会很弱

打包工具--》输出后的结果（js模块）

一般源码都在src目录下，所以我们创建src目录。

创建src目录，并在src下创建index.js文件

输出一点内容。

console.log('hello zfpx');

我们想把这个文件打包：

npx webpack

他会默认去找node_modules下的bin文件

webpack.cmd：这里有一个判断如果当前目录有node.exe就执行，他就会用我们当前文件夹下的node.exe去执行 webpack.js

如果没有就用node去执行上一个目录下的webpack.js

他实际上执行的就是node_modules/webpack/bin/weboack.js文件。

这里实际上还需要webpack-cli的支持。如果没有安装webpack-cli 他会提示你去安装

这样我们就知道了这两者之间的关系。

这是我们打包出来的dist/main.js的文件。这个文件夹明显压缩过了

安装一个插件code runner

它帮我们执行node 代码

输出了我们的内容

我们明明一行代码却输出了很多。

wepack的功能是打包。支持我们js的模块化。

也就是说我们可以在index.js里面写一些模块化的代码

src/a.js文件及。我们可以在里面写一些node的语法

module.exports = 'zfpx';

导出以后，我们可以在index.js内引用。这种语法是不可能在浏览器中跑的。因为这是我们node的一个规范

我们输出str

运行我们的代码

输出结果

我们最终希望把产出的结果运行在浏览器上

我们在cmd里面再次执行npx webpack命令

这里会有一个warning的提示，提示你mode选项没有设置。 webpack会默认使用production的模式，

我们先不关心打包的结果是什么。

我们新建一个Index.html文件夹。并引用我们打包后的结果

我们找到我们的Index.html文件夹，直接双击用浏览器打开。看到我们输出的结果

webpack帮我们解析了js的模块，查找相关依赖的文件。把这些文件打包成一个文件。解决了浏览器require的问题。相当于它自己实现了一套模块化的机制

当前打包的机制比较弱。我们想修改输出的目录，就需要手动来配置

手动配置webpack

在根目录新建webpack.config.js文件。刚才的输出文件夹dist文件夹我们先删除。

配置webpack.config.js文件

webpack是node写出来的

path路径必须是一个绝对路径，这时候需要node的核心模块

let path=require('path');引用path模块。这是node内置的模块

path.resolve()方法可以把一个相对路径解析成一个绝对路径

这里我们使用Run Code查看输出的结果。发现path.resolve('dist')就是根目录的dist文件夹的路径

这里我们一般都会写上个__dirname，它表示当前根目录下产生一个dist目录

这样我们就有个入口和出口。

我们还希望打包出来的代码我们能看的见，不是压缩后的代码

这里我们为了能看清楚。是打包之前的代码，不是压缩之后的代码

我们选择开发模式

mode:'development',//模式默认两种 production development

再次运行npx webpack。这个时候我们打包出来一个bundle.js文件

这个bundle.js就是我们打包出来的结果

webpck.config.js文件的名字可以修改吗？

那么为什么默认叫这个名字

node_modules/webpack-cli/bin/config-yargs.js里面

webpack.config.js or webpackfile.js这是默认的两个名字，默认用的是前者

那么这个名字名字可以不可以改呢？这是我们后续要说的

最终代码

//webpack是node写出来的 node的语法

let path=require('path');

console.log(path.resolve('dist'));

module.exports = {

    mode:'development',//模式 默认两种 production development

    entry:'./src/index.js',//入口

    output: {

        filename:'bundle.js', //打包后的文件夹名

        path:path.resolve(__dirname,'dist'),//路径必须是一个绝对路径

    }

}

webpack.config.js