-
webpack.config.js的笔记
const path = require('path');
const {VueLoaderPlugin}=require('vue-loader'); //加载 vue
module.exports = {
entry: path.resolve(__dirname, "src/index.js"),
devServer: {
contentBase: './dist'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
//加载 vue
{
test: /\.vue$/,
use: [
'vue-loader'
]
},
// 加载 CSS
{
test: /\.css$/,
use: [
'vue-style-loader', //可不要
'style-loader',
'css-loader'
]
},
]
},
//加载 vue
plugins:[
new VueLoaderPlugin()
]
};
查看全部 -
问题:用splitChunks取代后,没有像老师编译后那样出现vendor.xxxx.js而是出现了三个bundle.xxx.js
学习:
hash和chunkhash的区别
webpack4 中已经删掉 代码分割 CommonsChunkPlugin,把其中的方法全部归到optimization.splitChunks中。
参考链接:
https://webpack.js.org/plugins/split-chunks-plugin/#src/components/Sidebar/Sidebar.jsx
查看全部 -
将项目的构建过程写在博客上了,中意的可以瞅瞅:
https://blog.csdn.net/weixin_41892205/article/details/80949601
查看全部 -
为什么我生成的 js 的压缩的?
查看全部 -
js 代码格式化插件:Beautify
查看全部 -
编译的时候提示没有file-loader,于是就安装了,安装后自作多情的在图片的url-loader下面加上了这个,于是背景图片就出不来了,去掉file-loader的配置就出来了
查看全部 -
webpack的组件:html-webpack-plugin
查看全部 -
各个安装或引入依赖的包的版本都要和老师的一致:
npm i vue@2.5.13
npm i webpack@3.10.0
npm i vue-loader@0.28.7
npm i vue-template-compiler@2.5.13
npm i css-loader@0.28.7
查看全部 -
checkbox 选中之后,v-model绑定的值如果是布尔类型,该值会变成true ,再点击会变成false。
查看全部 -
定义 isDev=process.env. NODE_DEV==="development"
module.export=config;
给config增加属性;if(isDev){
config.devServer={
port:"XXXX",
host:'0.0.0.0',
overlay:{
errors:true
}
}
}
查看全部 -
webpack-dev-server(用于开发环境下):
1、npm i webpack-dev-server
2、更改package.json设置,增加webpack-dev选项;
3、为了平台统一使用代码,安装cross-env;并在package.json中添加 cross-env命令;
4、在webpack.config.js中判断process.env的变量是否为development ;并重新定义config对象
查看全部 -
前端的价值查看全部
-
vue的api重点:
1.生命周期方法,
2.computed,
查看全部 -
very good!
查看全部 -
一、.vue用loader,.css用use,style-loader把css写到html中,css-loader便于webpack处理css文件.
二、loader是可以配置一些选项的。use:['style-loader','css-loader']
三、url-loader可以把图片转换成base-64代码,编写在js中,options['limit:1024'],如果图片大小小于1024,就编译成base-64。url-loader 封装了file-loader,实现对文件操作
四、npm i style-loader url-loader file-loader, url-loader依赖于file-loader。
五、css预处理器:stylus
六、npm i stylus-loader
七、sass,less都可以在webpack中配置相关的loader
查看全部
举报