二、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