webpack入门配置步骤详解
1、初始化
1、npm install webpack webpack-cli webpack-dev-server --g
全局安装必要的第三方插件
2、mkdir config dist src
新建三个文件夹
3、npm init -y
初始化package.json
4、在 src
文件夹中,新建 main.js
;在 config
文件夹中,新建 webpack.dev.js
配置webpack.dev.js
在 package.json
加入快捷命令
执行npm run dev
此时可以看到 dist
文件夹下面已经有bundle.js
了
这里特别注意下:文件目录中不要包含中文,否则会引起很多的问题
2、多文件入口
如果存在多文件入口,则需要1添加入口文件、2配置入口文件,3修改出口文件的filename
为[name].js
执行npm run dev
后
在 dist
文件夹中出现了同名的两个js文件
[name]
会根据入口文件的名称,打包成相同的名称,有几个入口文件,就打包几个文件
3、配置webpack-dev-server
作用:配置本地的服务器,它的基本配置是
这个时候如果执行npm run dev
会报错,需要在package.json
里配置
然后执行npm run server
就可以跑起来了
我们可以填写下文件,看下输出效果
1、在dist文件夹下新建index.html
,引入2个js文件
2、在js文件中分别写点东西
3、再次执行npm run server
,打开localhost:9000
4、引入CSS
webpack
中的 loaders
是可以将浏览器无法识别的文件转化,比如可以把 SASS/LESS
文件的写法转换成 CSS
,可以把ES6
、ES7
转换成ES5
,首先我们在src文件夹下创建index.css
文件并在入口文件中引入:
执行命令,发现报错
这是因为在webpack中想要打包css,通常需要加载 style-loader
和 css-loader
这2个加载器,它们的作用是:
css-loader
:加载css文件style-loader
:动态创建style标签,塞到html的head标签里;
安装依赖:
cnpm install style-loader css-loader --save-dev
配置loaders
:
执行命令,显示成功:
5、插件--压缩JS
webpack
内置 uglifyjs-webpack-plugin
的插件,直接引入配置
再次执行命令,文件已被压缩
6、插件--打包HTML
之前的HTML是我们手动写的,现在删除之前的JS引入,移动至src文件夹下面
现在的目标是:webpack
让 html
自动引入js,并打包到 dist
文件夹下,这里就要引入 html-webpack-plugin
安装依赖: cnpm install --save-dev html-webpack-plugin
配置plugins:
执行命令,可以看到 dist
文件夹下面已经有打包好的html了
7、SASS文件的打包
安装依赖:cnpm install node-sass sass-loader --save-dev
在原来的基础上,新增配置
新建sass文件
引入sass文件
执行命令,效果生效:
8、增加babel支持
babel主要是用于将es6/es7转为浏览器可识别的js
安装依赖:cnpm install --save-dev babel-core babel-loader babel-preset-env
配置加载器:
编写文件:
打包代码执行成功
番外话
webpack的核心概念就是,一切皆模块,从一个入口开始,不停的分析解析最终获取到一个浏览器可识别的js文件
核心是,解析浏览器无法识别的文件的loaders,帮助自动化打包构建的插件plaugins
剩下的就是按要求进行配置的
部分基础知识点
__dirname表示当前文件所在的目录
__filename表示正在执行脚本的文件名
path.resolve([...paths]) 可以将路径或者路径片段解析成绝对路径,...paths是传入的字符串参数,是路径序列或者路径片段
本文内容主要摘自于 “https://www.jianshu.com/p/6712e4e4b8fe”
webpack入门配置步骤详解的更多相关文章
- Oracle 11g客户端在Linux系统上的配置步骤详解
Oracle 11g客户端在Linux系统上的配置步骤详解 2011-07-26 10:47 newhappy2008 CSDN博客 字号:T | T 本文我们主要介绍了Oracle 11g客户端在L ...
- C#自制Web 服务器开发:mysql免安装版配置步骤详解分享
mysql免安装版配置步骤详解分享 1.准备工作 下载mysql的最新免安装版本mysql-noinstall-5.1.53-win32.zip,解压缩到相关目录,如:d:\ mysql-noinst ...
- IntelliJ IDEA 2017 JDK Tomcat Maven 配置步骤详解(一)
要求 配置 Java基础环境(实际上应该在虚拟机linux环境下 安装CentOS 7,但是我这电脑实在承受不住了) 安装 开发工具 IntelliJ IDEA 2017.1 第一部分: JDK ...
- Lucene配置步骤详解
Lucene配置步骤说明: 1.搭建环境: 2.创建索引库: 3搜索索引库. Lucene配置步骤: 第一部分:搭建环境(创建环境导入jar包) 前提:已经创建好了数据库(直接导入book.sql文件 ...
- phpStudy2018安装与配置步骤详解
phpStudy 2018是一款非常强大的php环境调试工具,一次性安装,无须配置即可使用,是非常方便.好用的PHP调试环境.对学习PHP的新手来说,WINDOWS下环境配置是一件很困难的事:对老手来 ...
- mysql在win系统dos 安装版配置步骤详解
1.准备工作 下载mysql的最新免安装版本mysql-noinstall-5.1.53-win32.zip,解压缩到相关目录,如:d:\ mysql-noinstall-5.1.53-win32.这 ...
- IntelliJ IDEA 2017 MySQL5 绿色版 Spring 4 Mybatis 3 配置步骤详解(二)
前言 继续上一篇安装教程 首先是MySQL绿色版安装之后其他组件安装,如果篇幅较长会分为多篇深入讲解,随笔属于学习笔记诸多错误还望指出 共同学习. MySQL 5.7 绿色版 我本地安装的是 ...
- (转载) IBM DB2数据库odbc配置步骤详解
[IT168 技术] 首先安装IBM DB2 odbc driver 1):可以单独下载DB2 Run-Time Client,大约(86.6m),安装后则odbc驱动程序安装成功.下载地址:ftp: ...
- CentOS 7.0系统安装配置步骤详解
CentOS 7.0系统是一个很新的版本哦,很多朋友都不知道CentOS 7.0系统是怎么去安装配置的哦,因为centos7.0与以前版本是有很大的改进哦. 说明: 截止目前CentOS 7.x最新版 ...
随机推荐
- Reinforcement Learning by Sutton 第三章习题答案
好不容易写完了 想看全部的欢迎点击下面的github https://github.com/LyWangPX/Solutions-of-Reinforcement-Learning-An-Introd ...
- unittest---unittest断言
在unittest单元测试中也提供了断言的方式,通过断言判断用例有没有成功. unittest常用断言 unittest框架的TestCase类提供以下方法用于测试结果的判断 方法 检查 assert ...
- 在ASP.NET中备份数据库以及还原(不成熟)
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- 深入理解 Java 异常
- Net Core的API文档工具Swagger
一.安装swagger 新建一个net core的api项目,通过NuGet安装Swashbuckle.AspNetCore. 二.注册swagger服务 在Startup.cs中注册Swagger生 ...
- java基础(6):方法
1. 方法 1.1 方法概述 在我们的日常生活中,方法可以理解为要做某件事情,而采取的解决办法. 如:小明同学在路边准备坐车来学校学习.这就面临着一件事情(坐车到学校这件事情)需要解决,解决办法呢?可 ...
- Go-内置time包
一.导入包 import "time" 二.转换成Time对象 获取当前时间:time. Now () 自定义时间:time. Date(year int, month Month ...
- javaWeb核心技术第十三篇之Ajax
Js--ajax--原理解释 概述:异步刷新网页,不会刷新整个页面. Get原理: <%@ page language="java" contentType="te ...
- C#中获取多个对象list中对象共有的属性项
场景 有一组数据list<TestDataList> 每一个TestDataList是一个对象,此对象可能有温度数据,也可能没有温度数据. 有温度数据的情况下,温度数据属性又是一个list ...
- 【转载】作为Android开发者,你真的熟悉Activity吗?
学过android的人都知道,activity是最常用的四大组件之一,但你真的了解透彻activity了吗?接下来,本人将从activity的正常和异常生命周期.启动模式.IntentFilter匹配 ...