Webpak4.0+vue从零构建基础配置，环境区分，插件配置_vue 您可能需要一个适当的加载器来处理此文件类型,目前没有配置任何加载器来处理-CSDN博客

本文链接：https://blog.csdn.net/weixin_45851208/article/details/103204648

webpack如今应用已经非常非常普遍了，很多前端初学者可能还不太了解它怎么用，为什么要用。此文章是自己多年以前首次研究webpack思路，很适用对webpack学起没有任何头绪小白参考。文章很直接，简单，粗暴。哈哈哈~~~

基本目录

为什么要用webpack?
如何使用webpack?
如何配置和使用webpack？

为什么要用webpack?

1.模块化。
在开发大的单页应用时，可以将这个项目拆成多个模块，团队协同开发，大大提高开发效率。但是因为多个模块是存在不同文件中的，因此加载这个单页应用时，会发出多次请求。这时我们希望能够把所有模块打包成一个文件，这样可以减少请求次数，提升体验。

2.语言转化
在开发这个单页应用中，同样是为了提高开发效率，使用了一些js和css的扩展语言，如TypeScript及Less、stylus，这些扩展使我们可以更简洁优雅地写代码，但是开发完成开始部署时，需要将它们进行相应的转换，转换成浏览器支持的语言。这时，我们希望能够有个工具可以以很大的自动化程度去完成这个转换工作。

3.压缩
我们为了提高其性能，希望做一些列处理，比如把js进行压缩

如何使用webpack?

webpack将会从我们指定的入口文件进入，然后按照CommonJS规范分析依赖(require, exports, import等关键字)，将依赖的所有文件用对应的加载器处理后打包到同一个文件中去。

如何配置和使用webpack？

基础配置

webpack基础概念：

entry : 表示入口文件，可以有多个入口文件；
output : 项目打包出口；
loader : webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果；
plugin : 插件可以完成更多loader不能完成的任务；

基本步骤：
mkdir webpack-demo && cd webpack-demo
npm init -y
npm i –D webpack
npm i –D webpack-cli
此时创建出来目录如图：
在这里插入图片描述
安装:npm install vue
安装:npm install vue-router --save
安装:npm install axios –S
（此处省略vue基本页面和基本路由跳转，若有需要请自行安装和添加内容，目录结果如图）

最简单粗暴的方法，每走一步，就运行npm run dev，然后根据它的报错提示一步一步走下去。虽然是个笨办法，但它是有效果的。来，让我们试着npm run dev运行下~
在这里插入图片描述报错：在script里找不到 dev？
原因分析：没有可运行的本地服务器支持。
webpack-dev-server是一个用来快速搭建本地运行环境的工具，是一个轻量级的服务器，修改文件源码后，自动刷新页面将修改同步到页面上。（使用webpack-dev-server的打包是不会产生出口文件的，他是将出口文件放在内存里，这样来做到实时读取和实时打包的）

安装：npm install webpack-dev-server --save-dev
package.json中script里添加：“dev”: “webpack-dev-server --open”
运行：npm run dev
在这里插入图片描述
报错原因：没有找到入口 webpack.config配置文件。

解决方案：本章主要内容就是webpack，但目前为止，我们还没有任何关于webpack的东西。所以手动添加一个webpack.config.js文件。

webpack.config.js文件配置：

const path = require("path")
module.exports = {
   
    mode: "development",     // 配置环境（这里是开发）
    entry: "./src/main.js",     // 配置入口
    output: {
                              // 配置出口
        filename: "main.js",   // 文件名字
        path: path.resolve(__dirname, "dist")       // 文件路径(绝对路径)
    },
}

上面的代码就是做了这样一件事，将src下的main.js文件以js的形式打包到dist目录下的main.js中去。
运行npm run dev试一下~ 让我们看下报错内容~
在这里插入图片描述
报错原因：您可能需要适当的加载器来处理此文件类型，当前没有配置加载器来处理此文件。

解决方案：安装vue的加载组件，和vue模板的编译组件
npm i vue-loader vue-template-compiler --save-dev

配置：webpack.config.js

module: {
   
    rules: [{
   
        test: /\.vue$/,
        loader: 'vue-loader'
    }]
}

运行试试~
在这里插入图片描述
此处有多个报错信息：
第二个ERROR，其实是我当时没有安装vue-router导致的。此文章前面已经有安装步骤，如果大家在前面安装过之后，应该是不会出现此报错的。
第一个ERROR和第三个ERROR，意思是使用的Vue加载程序没有相应的插件。确保在webp