webpack-前端资源加载/打包工具（2）

前言

上一篇webpack-前端资源加载/打包工具（1）我们记录了webpack的基础用法，这里我们的Loaders其实是可以通过官网查看而不需要背下来，官网Loaders

一、复习

1.下载

webpack及其相关插件的安装在--save之后都要加个-dev，不是Devc++的那个dev，而是说明这个是在编译阶段进行安装使用的

2.自定义webpack

自己创建webpack.config.js文件并编写相应规则。

3.两个重要插件

webpack使用时，总要将打包后文件手动引入html文件里，所以为了方便，引入html-webpack-plugin,这个插件会自动生成html文件并引入打包好的文件。
再就是多余的文件清理，引入clean-webpack-plugin即可。
两个插件使用：

plugins:[
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ]

4.Loaders
主要是在资源文件的打包时使用，具体loader官网里有，所以不需硬背。

二、devtool

当我们未打包前的文件编写出错时，如下情况，
原print.js文件：（很显然会报错）

console.log(a)
let a="123"

经打包后的aaa.js文件:

(()=>{console.log(l);let l="123"})();

运行html文件果然报错：

但是错误显示的是打包后文件的第一行出错，问题来了，我们打包后的文件代码就一行，很难找出错误，尤其有时候代码结构复杂，我们可能也很难读懂，有什么办法可以直接看原代码找错误吗？

devtool
使用了这个工具后，他会告诉你，你的这个错误出现在哪个源文件的哪一处。（不用下载）

使用代码：

然后你就可以定位到你原文件的错误

三、webpack观察者模式

我们每次运行都要重新输入一遍npx webpack，所以这里有一种办法，可以直接自编译：npx webpack --watch
使用这个后，程序的运行不会直接退出，等你每次修改后他会直接自编译，这样就会方便很多。

四、webpack-dev-server

这个插件可以说可以让你拥有和react的npm start类似的效果。
安装语句：

npm i webpack-dev-server --save-dev

用法如下：

终端输入：

npx webpack-dev-server --open

然后你的程序就会自己打开网页，就像react运行。也可以进行自编译，但不包括我们的配置文件。然后可以在内部改变端口号;

五、自定义脚本

运行react时我们使用的是npm start，当然，我们的webpack也可以自定义这样的运行 指令
脚本中编写内容如下：

这样我们在运行的时候就可以直接执行脚本
例如我们要使用build，可以直接控制台输入：npm run build或者npm build就可以直接编译运行。(但是有的脚本会提示你加上run，那么就一定要加上)

六、获取外置css文件

上一篇博客的运行结果我们可以发现，我们的css文件打包后直接写入到了html文件里，现在我们要将他抽离出来做外置css文件。
安装插件：

npm i mini-css-extract-plugin --save-dev

然后引入：

const MiniCssExtractPlugin =require('mini-css-extract-plugin')

添加loader：

再添加plugins（里面可以自定义文件名，也可以不写，默认是app.css）：

最后运行，你就会得到一个css文件