学习 webpack，踩过的坑

最新推荐文章于 2023-01-30 20:16:13 发布

Pop–

最新推荐文章于 2023-01-30 20:16:13 发布

阅读量893

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/weixin_45026839/article/details/119455837

版权

Vue.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

最终的目的都是简化入口main.js里面的代码，能分离就分离，把那些有依赖的文件（css， js ，less ， .vue）都导入到这里总之在html页面上只有 bundle.js 一个文件引入

目的：实现前端的模块化将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)

css处理时安装了 css loader@2.0.2 和 style loader0.28.0 报错

网友说是现在2.0.2 css的loader 的版本需要webpack 4.0.0 的版本

弹幕发了一个解决依赖冲突的办法：
npm install --legacy-peer-deps css-loader@2.0.2 --save-dev 不知道是否有用？
高版本用：test：/.css$/i 待检测

经过检测：按照老师的安装版本方式并没有报错，并没有出现现在2.0.2 css的loader 的版本需要webpack 4.0.0 的版本这个问题
package.json 如何生成的？ node_modules 又是怎么来的？他们的生成顺序是怎么的？

先 npm init 生成 package.json 然后 npm install 生成 node_modules 顺序不可反

又出现问题了当npm init 后再使用 npm install 时并没有成功生成 node_modules 只有一个文件

但是当我npm安装了一个webpack 之后再使用 npm install 就成功了
疑问？难道 node_modules 这个东东得现有别的东东安装之后才能安装？
总结使用webpack 的步骤：
1. npm init 初始化生成 package.json
2. npm install 生成 node_moudles
3. 安装 webpack
4. 安装各种对应的loader
5. 安装loader，在webpack.config.js里面进行相应的配置，将创建的（js,css,less,img）引入到出口文件中（这里设置的出口为 main.js）
6. 在集成终端中输入指令 npm run build （build在package.json 中设置了，对应webpack）
7. 之后在dist 文件夹下的 bundle.js 就是所有打包的集合未来上传到服务器中部署
8. 在首页index 直接引入 bundle.js 就可以加载所有的，不需要在引入其他文件
图片处理：

url-loader 将文件作为 data URI 内联到 bundle 中
file-loader 将文件发送到输出目录

默认情况下，webpack会将生成的路径直接返回给使用者
但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/ 在 output下面添加 publicPath: “dist/”
cnpm 下载完对应的loader后，去webpack的官网找相应的****webpack.config.js 配置，

但是需要自己做相应的修改比如使用babel-loader 对es6（es6就是ES2015）转换成 es5 ，在
options: {
presets: ["@babel/preset-env"],
},
这里就要将@babel/preset-env，改为es2015
在安装和配置好babel-loader,之后输入指令 npm run build 却报错了

第一次报： Can’t resolve 'css-loader 于是乎我就重新装了一遍 css-
loader 之后再输入指令失败

第二次报： Can’t resolve ‘less-loader’ 于是乎我就重新装了一遍 css-loader 之后再输入指令失败

第三次报： Can’t resolve 'url-loader 于是乎我就重新装了一遍 css-loader 之后再输入指令失败

于是乎我把除了babel-loader 之外的都重新安装了一遍
```
"devDependencies": {
		"babel-core": "^6.26.3",
		"babel-loader": "^7.1.5",
		"babel-preset-es2015": "^6.24.1",
		"css-loader": "^2.0.2",
		"file-loader": "^3.0.1",
	 "less": "^3.9.0",
		"less-loader": "^4.1.0",
		"style-loader": "^0.23.1",
		"url-loader": "^1.1.2",
	 "webpack": "^3.6.0"
 }
```
结果最后成功了！！于是我在想这是不是和 webpack.config.js 里面的配置顺序有关所以我去尝试把babel放到头上

嘿嘿！！我的发现是对的。就应该放在 rules 的第一个位置
引入 vue.js

直接 npm 安装然后main.js 里面导入之后就可以按照之前的学习的方式敲代码，这里需要注意的是我们在vue实例里面定义了template属性，里面的内容会替换掉 el 挂载对应的模板内容。

但是这里我们又遇到问题，如果将代码全部放在template里面，那么代码将会很复杂，所以此时我们需要使用 .vue 文件，将他们分离开来，分离之后，在入口 main.js 里面直接导入该组件的.vue文件（import App from ‘’），注意在main.js 里面的vue实例不用抽离

文件分离完之后----->在入口导入----->下载可以运行 .vue文件的loader和compiler----> 配置对应的webconfig.js ---->npm run build
安装 .vue相关执行文件发现运行时报错：

[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options

（[vue loader]vue模板编译器必须作为对等依赖项安装，或者必须通过选项传递兼容的编译器实现）估摸着是vue-loader 版本的问题

解决方法1 ：降低 vue-loader 的版本到15以下，就可以不用安装插件

成功了，但是出现问题：<h3 data-v-5e019a2f="" class="title">徐霞山</h3> 会有这个生成：
```
data-v-5e019a2f
```
发现问题出处：{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

解决方法：这个不是报错，而是需要将babylon 换成babel

找到 node_modules 包里面的：node_modules\vue-loader\lib\template-compiler\index.js

将{ parser: “babylon” } 换成?{ parser: “babel” } 即可；

解决方法2：安装插件，并且配置对应的webpack.config.js

失败了！！
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

我这里使用15以上的版本都是报这个错，插件也引入了，问题是我发现vue-loader 15 要和 webpack 4 一起用，而我这里的是3.6版本的。暂且不升级webpack了
碰到个新东西： <style lang='stylus' scoped></style>，lang:普通的style标签只支持普通的样式，如果想启用scss或者less，需要为style元素设置lang属性,而stylus更加强大 stylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数。
runtime-only --> 代码中不可以有任何的template
runtime-compiler --> 代码中可以有template，因为compiler可以用于编译template
webpack 配置文件的分离
```
cnpm install webpack-merge@4.1.5 --save-dev
```
将webpack.config.js 分离成三个{ 公共依赖：base.config.js, 开发时依赖：dev.config.js, 生产时依赖：prod.config.js} 在开发依赖和生产依赖里导入公共依赖

dev.config.js
const baseConfig = require(’./base.config’)
module.exports=webpackMerge(baseConfig,{devServer后面的东东})

之后还要修改package.json
在build和dev 后面加上 --config ./build/prod.config.js 和 --config ./build/dev.config.js

还有就是base.config.js 里面的导出路径：改为（…/dist）

至此分离完成，执行 npm run build 进行打包检测是否有 dist
执行 npm run dev 开启本地服务检测页面是否可以正常打开