最终的目的都是简化入口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 的步骤 :
- npm init 初始化 生成 package.json
- npm install 生成 node_moudles
- 安装 webpack
- 安装各种对应的loader
- 安装loader,在webpack.config.js里面进行相应的配置,将创建的(js,css,less,img)引入到出口 文件中(这里设置的出口为 main.js)
- 在集成终端中输入指令 npm run build (build在package.json 中设置了,对应webpack)
- 之后在dist 文件夹下的 bundle.js 就是所有打包的集合 未来上传到服务器中部署
- 在首页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 开启本地服务 检测页面是否可以正常打开