一.初始化

1.创建文件夹

2.npm init  -y

二.安装webpack 和webpack-cli

1.yarn add webpack webpack-cli@3.3.10 -D

(这里指定webpack-cli版本是因为,webpack-cli最新的版本是4.xx测试版,和我的webpack-dev-server发生了冲突,导致dev-sever启动不起来)

三.创建config文件夹做开发环境和生产环境的配置

1.base.config.js

2.dev.config.js

3.pro.config.js

四.创建src目录以及public目录

1.src目录创建根文件main.js,作为webpack的入口文件.创建App.vue文件

2.public目录创建index.html做挂载点

五.webpack基本配置项

步骤五-最后,有在webpack-基础知识文章中详细讲解:https://www.cnblogs.com/liuXiaoDi/p/12245421.html

    - entry
    - output
    - resolve
    - plugins
    - module

六.plugins常用的插件

这几个插件用于包的配置

html-webpack-plugin

clean-webpack-plugin

copy-webpack-plugin

     extract-text-webpack-plugin

下载以上这些

     yarn add html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D

七.常用loader

处理js的loader

babel-loader

@babel/core

@babel/preset-env

yarn add babel-loader @babel/core @babel/preset-env -D

根目录下创建.babelrc文件,在该文件内做babel相关loader的配置

处理图片的loader

url-loader

file-loader

yarn add url-loader file-loader -D

处理css的laoder

style-loader:把.css文件以<style>形式引入到html中(传统方式以<link>形式在html中引入css)

css-loader:加载.css文件

node-sass:处理sass

postcss-loader

atutoprefixer

yarn add 以上这些

     yarn add style-loader css-loader sass-loader postcss-loader autoprefixer -D
   
      处理vue单文件组件(如果做vue项目的化,看这里)
        vue-loader
        vue-template-compiler
        yarn add vue-loader vue-template-compiler -D
 
 

八.合并webpack配置项

yarn add webpack-merge -D

九.webpack服务

yarn add webpack-dev-server -D

webpack搭建环境步骤的更多相关文章

  1. TypeScript(二)使用Webpack搭建环境

    今天继续来更新,本篇文章我们讲环境搭建,主要分享一些环境搭建的学习资源及安装步骤,解决一些安装时可能会出现的问题.下面就让我们一起进入学习第一步,搭建TypeScript环境:一. 环境搭建1.1. ...

  2. 教你使用Webpack搭建环境 TypeScript (2)

      一. 环境搭建1.1. TypeScript环境安装已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git在上一个章节中我们说过,T ...

  3. vue+node+webpack搭建环境

    一.环境搭建 1.1.去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html  ) 注意node的版本,只有支持和谐模 ...

  4. python + selenium 搭建环境步骤

    介绍在windows下,selenium python的安装以及配置.1.首先要下载必要的安装工具. 下载python,我安装的python3.0版本,根据你自己的需要安装 下载setuptools ...

  5. Java基础笔记(1) 语言 JAVA的历史 Java的搭建环境

    本文除了搭建是重点,其他的都当阅读小说一样去看就好了,不想看可以直接抓住重点,我会改变颜色勾出重点! 英语是人与人交流沟通的重要方式之一.JAVA:是人与计算机沟通交流重要方式之一.我们除了用java ...

  6. Android环境搭建的步骤

    Android 环境搭建步骤 这里简单介绍一下学习Android之后如何搭建环境的问题 一.    在搭建环境之前,首先你要先下载Java JDK(根据系统位数选择下载是64位或32位的),Eclip ...

  7. Microsoft Dynamics CRM 2011 面向Internet部署 (IFD) ADFS虚拟机环境搭建的步骤(CRM与ADFS装在同一台服务器上) 摘自网络

    1: 安装windows server 2008 R2 中文版 (过程略) 安装完成后设置机器名和IP地址, 本过程机器名 crm5dev,192.168.0.110 dns: 192.168.0.1 ...

  8. webpack+react搭建环境

    近日自己项目遇到需要用webpack搭建react环境,查了挺多 ,自己总结一下 1.下载安装最新版node.js(https://nodejs.org/en/) 2.主要看自己网络情况,可以选择安装 ...

  9. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

随机推荐

  1. 开源运动的"圣经"——《大教堂与集市》读书笔记

    作者:Eric S. Raymond 一.黑客圈简史 1.早期 (1)MIT 与 ITS "黑客"一词大约就起源于MIT的计算机文化. 从PDP-1时代开始,黑客文化的命运就和DE ...

  2. 004-流程控制-C语言笔记

    004-流程控制-C语言笔记 学习目标 1.[掌握]关系运算符和关系表达式 2.[掌握]逻辑运算符和逻辑表达式 3.[掌握]运算符的优先级和结合性 4.[掌握]if-else if-else结构的使用 ...

  3. Android 程序代码进行代码混淆

    1.在Eclipse项目包下的project.properties文件中加入proguard.config=${sdk.dir}/tools/proguard/proguard-android.txt ...

  4. Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(十四)之Type Information

    Runtime type information (RTTI) allow you to discover and use type information while a program is ru ...

  5. PHP代码审计(初级篇)

    一.常见的PHP框架 1.zendframwork: (ZF)是Zend公司推出的一套PHP开发框架 功能非常的强大,是一个重量级的框架,ZF 用 100%面向对象编码实现. ZF 的组件结构独一无二 ...

  6. 2020不平凡的90天,Python分析三个月微博热搜数据带你回顾

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:刘早起早起 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  7. self不明白什么意思,我来帮助你了解self的含义

    先看下面这段代码 # 用函数模仿类def dog(name, gender): def jiao(dog1): print('%s汪汪叫' % dog1["name"]) def ...

  8. Couchdb 垂直权限绕过漏洞(CVE-2017-12635)漏洞复现

    couchdb简介: Apache CouchDB是一个开源的NoSQL数据库,专注于易用性和成为“完全拥抱web的数据库”.它是一个使用JSON作为数据存储格式,javascript作为查询语言,M ...

  9. MySQL不香吗,为什么还要有noSQL?

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是分布式专题的第14篇文章,我们一起来看看NoSQL数据库. 其实我很早就想写写分布式数据库相关的文章,既是我现在正在学习的,也是我很感 ...

  10. c++<ctime>中常用函数

    先说一下c++标准库并没有提供所谓的日期类型,而是继承了c的日期类型 <cmath>里面有些常用的函数,比如计时函数clock().获取系统时间的函数time(),下面就具体的介绍一下 1 ...