学习webpack基础笔记01
学习webpack基础笔记
1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件、预处理器,正确的配置好去使用
2.从0配置webpack
- 1.创建文件夹
- yarn init -y (生成package.json)
-在package.json里面写好
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.product.config.js"
},
- 2.创建webpack.config.js文件配置
- module.exports={} 导出配置文件
- mode: "development | production | none" 指定运行环境,none可不写
- entry: "./src/index.js" 入口环境
- module: {rules:[{}]} 配置正则,loader预处理文件
- plugins:[] 插件
- 3.创建src文件夹
-index.html 写一个项目挂下点
-index.js 引入项目挂载点,编写内容
-index.css 编写css样式引入
- 4.不同的环境可以配置一个webpack.base.config.js
-引入插件,将公共的配置提取出来,不同的环境配置,创建多个文件,在package.json里面声明引用
- 5.输出文件夹,可不写,默认dist,写的话要引入安装path
output:{
path: path.resolve(__dirname,dist_dir)
},
3.常见plugin和loader
HtmlWebpackPlugin
ClearWebpackPlugin
VueLoaderPlugin
style-loader
css-loader
less / less-loader
scss / scss-loader
file-loader
...
module: {
rules: [
{
test:/\.css$/,
loader: ['style-loader', 'css-loader']
},{
test:/\.less$/,
loader: ['style-loader', 'css-loader', 'less-loader']
},{
test:/\.(jpg|png|svg)$/,
loader: ['file-loader']
}
]
},
plugins: [
new CleanWebpackPlugin(dist_dir), ------清理html文件
new HtmlWebpackPlugin({
template:'./src/index.html',
title: 'Dev mode'
})
]
{
"name": "online",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack --config webpack.dev.config.js",
"build": "webpack --config webpack.prod.config.js"
},
"license": "MIT",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"style-loader": "^1.1.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
vue基础配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',//指定开发环境
entry: './src/index.js', //入口
module: {
// 处理器
rules: [
{
test:/\.vue$/,
loader:'vue-loader',
},
{
test: /\.js?$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
]
},
plugins: [ //引入html的插件
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:"./src/index.html"
}),
]
}
{
"name": "webpack01",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"@babel/core": "^7.8.7",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"vue-loader": "^15.9.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"http-server": "^0.12.1",
"vue": "^2.6.11"
}
}
学习资料:山地人
学习webpack基础笔记01的更多相关文章
- HTML基础笔记-01
---恢复内容开始--- 学习网站:W3School 1.基础知识 目录: <1.我的文档—> 选择目录名—> 主页—> 样式(点击标题样式,选择你想要的每个标题,重复此步骤) ...
- bash shell学习-正则表达式基础 (笔记)
A gentleman is open-minded and optimistic; a small person is narrow-minded and pessimistic. "君子 ...
- bash shell学习-shell基础 (笔记)
When you hoist the sails to cross the sea, you willride the wind and cleave the waves. "长风破浪会有时 ...
- 黑马程序员_java基础笔记(01)...java的环境搭建
—————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流!—————————— JavaSE(Java Standard Edtion java标准版)技术概况 ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- Vue学习计划基础笔记(六) - 组件基础
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...
- mysql学习之基础篇01
大概在一周前看了燕十八老师讲解的mysql数据库视频,也跟着学了一周,我就想把我这一周所学的知识跟大家分享一下:因为是第一次写博客,所以可能会写的很烂,请大家多多包涵.文章中有不对的地方还请大家指出来 ...
- 2015年10月15日学习html基础笔记
一个互联网公司的分工,小公司要求全能,拿一个项目全部做出来.大公司分工明细,主要步奏为策划人员策划方案,美工人员设计图有.psd.rp等,前端人员做静态页面,后台人员获取数据java php .net ...
- Vue学习计划基础笔记(四) - 事件处理
事件处理 目标: 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符 理解在html中监听事件的意义 监听事件(v-on) 类似普通的on,例如v-on:click或@click就相当于普通的 ...
随机推荐
- HDU-1164-Eddy's research I(分解质因数)
由于这道题目数据范围小,所以属于水题.可以采取暴力的做法来解决. 代码如下: #include"bits/stdc++.h" using namespace std; ; ]; v ...
- Nginx 原理和架构
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器.Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名Nginx 里 ...
- cas单点登录打包时下载慢!
环境:win10 百度网盘下载 版本: cas-overlay-template-5.3 提取码 d1b6 添加阿里的到pom.xml 注意添加到第一列 <!--阿里云仓库--& ...
- Linux系统添加新用户
Linux系统中一般不直接使用root用户进行操作,需要添加新的用户. 首先,查看当前系统已有的用户 cat /etc/passwd 查看用户组 cat /etc/group 其次,添加想要的用户组和 ...
- 吴裕雄--天生自然 R语言开发学习:时间序列
#-----------------------------------------# # R in Action (2nd ed): Chapter 15 # # Time series # # r ...
- <NOI2002>银河英雄传说の思路
emm并没有什么好说的.毕竟我这个蒟蒻都能yy出来 #include<cstring> #include<cstdio> #include<iostream> #i ...
- vue watch和computed的使用场景
watch 监听某个数据的变化(监听完调用什么函数) 一个数据影响多个数据 (比如:浏览器自适应.监控路由对象.监控自身属性变化) computed 计算后返回新 一个数据受多个数据影响(比如:计算总 ...
- 同时安装Python2,Python3如何解决冲突问题【官方解法】
使用py -2或py -3命令来区分调用Python启动器 去掉参数 -2/-3如何运行? 每次运行都要加入参数-2/-3还是比较麻烦,所以py.exe这个启动器允许你在代码中加入说明,表明这个文件应 ...
- Selenium&Pytesseract模拟登录+验证码识别
验证码是爬虫需要解决的问题,因为很多网站的数据是需要登录成功后才可以获取的. 验证码识别,即图片识别,很多人都有误区,觉得这是爬虫方面的知识,其实是不对的. 验证码识别涉及到的知识:人工智能,模式识别 ...
- ThinkPHP判断更新是否成功的正确方法
如何判断一个更新操作是否成功 $Model = D('Blog'); $data['id'] = 10; $data['name'] = 'update name'; $result = $Model ...