学习webpack基础笔记

1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件、预处理器,正确的配置好去使用
2.从0配置webpack
  1. - 1.创建文件夹
  2. - yarn init -y (生成package.json)
  3. -在package.json里面写好
  4. "scripts": {
  5. "dev": "webpack-dev-server --config webpack.config.js",
  6. "build": "webpack --config webpack.product.config.js"
  7. },
  8. - 2.创建webpack.config.js文件配置
  9. - module.exports={} 导出配置文件
  10. - mode: "development | production | none" 指定运行环境,none可不写
  11. - entry: "./src/index.js" 入口环境
  12. - module: {rules:[{}]} 配置正则,loader预处理文件
  13. - plugins:[] 插件
  14. - 3.创建src文件夹
  15. -index.html 写一个项目挂下点
  16. -index.js 引入项目挂载点,编写内容
  17. -index.css 编写css样式引入
  18. - 4.不同的环境可以配置一个webpack.base.config.js
  19. -引入插件,将公共的配置提取出来,不同的环境配置,创建多个文件,在package.json里面声明引用
  20. - 5.输出文件夹,可不写,默认dist,写的话要引入安装path
  21. output:{
  22. path: path.resolve(__dirname,dist_dir)
  23. },
3.常见plugin和loader
  1. HtmlWebpackPlugin

  2. ClearWebpackPlugin

  3. VueLoaderPlugin

  4. style-loader

  5. css-loader

  6. less / less-loader

  7. scss / scss-loader

  8. file-loader

...

  1. module: {
  2. rules: [
  3. {
  4. test:/\.css$/,
  5. loader: ['style-loader', 'css-loader']
  6. },{
  7. test:/\.less$/,
  8. loader: ['style-loader', 'css-loader', 'less-loader']
  9. },{
  10. test:/\.(jpg|png|svg)$/,
  11. loader: ['file-loader']
  12. }
  13. ]
  14. },
  1. plugins: [
  2. new CleanWebpackPlugin(dist_dir), ------清理html文件
  3. new HtmlWebpackPlugin({
  4. template:'./src/index.html',
  5. title: 'Dev mode'
  6. })
  7. ]
  1. {
  2. "name": "online",
  3. "version": "1.0.0",
  4. "main": "index.js",
  5. "scripts": {
  6. "dev": "webpack --config webpack.dev.config.js",
  7. "build": "webpack --config webpack.prod.config.js"
  8. },
  9. "license": "MIT",
  10. "devDependencies": {
  11. "clean-webpack-plugin": "^3.0.0",
  12. "css-loader": "^3.4.2",
  13. "file-loader": "^6.0.0",
  14. "html-webpack-plugin": "^3.2.0",
  15. "less": "^3.11.1",
  16. "less-loader": "^5.0.0",
  17. "style-loader": "^1.1.3",
  18. "webpack": "^4.42.0",
  19. "webpack-cli": "^3.3.11"
  20. }
  21. }
vue基础配置
  1. const HtmlWebpackPlugin = require('html-webpack-plugin')
  2. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  3. module.exports = {
  4. mode: 'development',//指定开发环境
  5. entry: './src/index.js', //入口
  6. module: {
  7. // 处理器
  8. rules: [
  9. {
  10. test:/\.vue$/,
  11. loader:'vue-loader',
  12. },
  13. {
  14. test: /\.js?$/,
  15. loader: 'babel-loader'
  16. },
  17. {
  18. test: /\.css$/,
  19. use: [
  20. 'vue-style-loader',
  21. 'css-loader'
  22. ]
  23. },
  24. {
  25. test: /\.less$/,
  26. use: [
  27. 'vue-style-loader',
  28. 'css-loader',
  29. 'less-loader'
  30. ]
  31. }
  32. ]
  33. },
  34. plugins: [ //引入html的插件
  35. new VueLoaderPlugin(),
  36. new HtmlWebpackPlugin({
  37. template:"./src/index.html"
  38. }),
  39. ]
  40. }
  1. {
  2. "name": "webpack01",
  3. "version": "1.0.0",
  4. "main": "index.js",
  5. "license": "MIT",
  6. "scripts": {
  7. "dev": "webpack-dev-server --config webpack.config.js",
  8. "build": "webpack --config webpack.config.js"
  9. },
  10. "devDependencies": {
  11. "@babel/core": "^7.8.7",
  12. "babel-loader": "^8.0.6",
  13. "css-loader": "^3.4.2",
  14. "html-webpack-plugin": "^3.2.0",
  15. "less": "^3.11.1",
  16. "less-loader": "^5.0.0",
  17. "vue-loader": "^15.9.0",
  18. "vue-template-compiler": "^2.6.11",
  19. "webpack": "^4.42.0",
  20. "webpack-cli": "^3.3.11",
  21. "webpack-dev-server": "^3.10.3"
  22. },
  23. "dependencies": {
  24. "http-server": "^0.12.1",
  25. "vue": "^2.6.11"
  26. }
  27. }
学习资料:山地人

学习webpack基础笔记01的更多相关文章

  1. HTML基础笔记-01

    ---恢复内容开始--- 学习网站:W3School 1.基础知识 目录: <1.我的文档—> 选择目录名—> 主页—> 样式(点击标题样式,选择你想要的每个标题,重复此步骤) ...

  2. bash shell学习-正则表达式基础 (笔记)

    A gentleman is open-minded and optimistic; a small person is narrow-minded and pessimistic. "君子 ...

  3. bash shell学习-shell基础 (笔记)

    When you hoist the sails to cross the sea, you willride the wind and cleave the waves. "长风破浪会有时 ...

  4. 黑马程序员_java基础笔记(01)...java的环境搭建

    —————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流!——————————  JavaSE(Java Standard Edtion java标准版)技术概况 ...

  5. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  6. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

  7. mysql学习之基础篇01

    大概在一周前看了燕十八老师讲解的mysql数据库视频,也跟着学了一周,我就想把我这一周所学的知识跟大家分享一下:因为是第一次写博客,所以可能会写的很烂,请大家多多包涵.文章中有不对的地方还请大家指出来 ...

  8. 2015年10月15日学习html基础笔记

    一个互联网公司的分工,小公司要求全能,拿一个项目全部做出来.大公司分工明细,主要步奏为策划人员策划方案,美工人员设计图有.psd.rp等,前端人员做静态页面,后台人员获取数据java php .net ...

  9. Vue学习计划基础笔记(四) - 事件处理

    事件处理 目标: 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符 理解在html中监听事件的意义 监听事件(v-on) 类似普通的on,例如v-on:click或@click就相当于普通的 ...

随机推荐

  1. HDU-1164-Eddy's research I(分解质因数)

    由于这道题目数据范围小,所以属于水题.可以采取暴力的做法来解决. 代码如下: #include"bits/stdc++.h" using namespace std; ; ]; v ...

  2. Nginx 原理和架构

    Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器.Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名Nginx 里 ...

  3. cas单点登录打包时下载慢!

    环境:win10 百度网盘下载 版本:  cas-overlay-template-5.3  提取码    d1b6 添加阿里的到pom.xml    注意添加到第一列 <!--阿里云仓库--& ...

  4. Linux系统添加新用户

    Linux系统中一般不直接使用root用户进行操作,需要添加新的用户. 首先,查看当前系统已有的用户 cat /etc/passwd 查看用户组 cat /etc/group 其次,添加想要的用户组和 ...

  5. 吴裕雄--天生自然 R语言开发学习:时间序列

    #-----------------------------------------# # R in Action (2nd ed): Chapter 15 # # Time series # # r ...

  6. <NOI2002>银河英雄传说の思路

    emm并没有什么好说的.毕竟我这个蒟蒻都能yy出来 #include<cstring> #include<cstdio> #include<iostream> #i ...

  7. vue watch和computed的使用场景

    watch 监听某个数据的变化(监听完调用什么函数) 一个数据影响多个数据 (比如:浏览器自适应.监控路由对象.监控自身属性变化) computed 计算后返回新 一个数据受多个数据影响(比如:计算总 ...

  8. 同时安装Python2,Python3如何解决冲突问题【官方解法】

    使用py -2或py -3命令来区分调用Python启动器 去掉参数 -2/-3如何运行? 每次运行都要加入参数-2/-3还是比较麻烦,所以py.exe这个启动器允许你在代码中加入说明,表明这个文件应 ...

  9. Selenium&Pytesseract模拟登录+验证码识别

    验证码是爬虫需要解决的问题,因为很多网站的数据是需要登录成功后才可以获取的. 验证码识别,即图片识别,很多人都有误区,觉得这是爬虫方面的知识,其实是不对的. 验证码识别涉及到的知识:人工智能,模式识别 ...

  10. ThinkPHP判断更新是否成功的正确方法

    如何判断一个更新操作是否成功 $Model = D('Blog'); $data['id'] = 10; $data['name'] = 'update name'; $result = $Model ...