Webpack4-基本使用

这里不对Webpack进行过多的介绍，请执行百度！

使用Webpack需要安装Node.js运行环境（下一步下一步即可）

https://nodejs.org/en/

安装nrm（使用nrm可以切换Node.js安装包时的镜像源，这样可以提高我们安装工具的速度）

打开Node.js的命令窗口,使用以下的命令进行安装操作

npm i nrm -g (-g代表的是全局安装)

安装完成以后可以使用以下的命令进行相关的操作nrm ls (查看nrm支持的镜像源列表)

nrm use cnpm (代表将镜像源切换到cnpm,前面有个星号就代表当前所使用的镜像源)

安装webpack（webpack最近的版本已经出到4.2版本，在个别的用法上已经和之前的3版本不一样了）

安装webpack需要安装三样东西： webpack，webpack-cli，webpack-dev-server。这里一个个来安装，安装到哪个就介绍哪个。

1.安装webpack (webpack本身就是一个工具,所以要先装它,另外几个工具都是建立在它的基础之上的)npm i webpack -g （全局安装webpack,这里可能有个小坑,在你项目中使用到webpack的时候可能会提示说找不到webpack这个模块,需要在项目目录下在安装一次,这里大家可以不全局安装的话还是不要全局安装的好！）

2.安装webpack-cli (webpack-cli 是webpack4版本以后需要安装的一个工具，不安装的话在使用时候会报错)npm install webpack-cli -g

那么这两个工具安装完成以后就可以使用webpack了！

那么我们可以创建一个项目来感受一下webpack的魅力所在，这里我创建的是一个叫webpac-study2的文件夹，在该文件夹下还创建了一个src文件夹！

我把所有的静态资源和页面都会放在这个src目录下，目录创建好后我们使用相应的命令来初始化项目。

打开终端输入 npm init （初始化项目,一定要在当前项目的根目录下来进行初始化操作）

命令输入完后会要你填写一些相应的信息,直接回车到底即可！初始化完成后项目会多出一个package.json文件！（这个文件很重要不能删除）

这边我在src目录下创建一个index.html和index.js（注意这里有坑，当你在后面打包项目的时候webpack4会去你的src目录下找有没有index.js文件如果找不到就会报错）所以这里大家尽量和我同步

创建完后我们在通过命令来安装一个jquery（之前没学过nodejs之前使用这些前端的第三方库的时候都是在页面通过script标签来引入）

npm i jquery （通过这个命令后就可以安装jquery, npm i 模块名,命令输入完后你的项目里会多出一个node_modules文件夹,注意不能删除,这个文件夹里放的都是支持库）

页面和jquery都下载好了，但是要如何使用呢？

那么以往的话可能大家想到的都是通过<script>标签引入jquery！但是这里大致是相同的。我们来看看如何使用jquery

index.html： 这个是我的index.html文件,那么可以看到我们引入的是index.js文件而非jquery的文件<html><head></head><body><script src="index.js"></script></body>
</html>

index.js: 这个是我的index.js文件的内容，那么可以看到,我们是通过 import $ from 'jquery'来导入jquery

但是很遗憾的告诉你,这样的方式在浏览器是运行不起来的！因为 import 是ES6中的语法，而现在的浏览器还不支持这种语法

所以我们需要借助webpack来进行打包，webpack会帮我们处理这种关系！

import $ from 'jquery'$(function(){alert('123456');
})

那么我们需要使用以下的命令来对刚刚所写的 index.js 文件进行打包，打包完后我们可以看到会多出一个./dist/index.js文件这个时候我们将index.html文件中的<script>标签的引入指向../dist/index.js，这个时候在访问index.html的时候文件就可以正常输出了

webpack ./src/index.js -o ./dist/index.js （webpack 需要被打包的文件路径 -o 打包后的输出路径和文件名）

好那么到这里基本你已经可以简单的使用webpack了（此时此刻应该给自己鼓鼓掌）！

那么问题也来了，你可能会觉得以前我使用jquery的时候只需要引入一个<script>就可以了，根本不需要像现在那么麻烦！

那么你应该换位想想，如果当你的页面引入了很多的框架（vue bootstrap jquery ....）那么是不是意味着你的html页面会有多个script标签多次的ajax请求？

那么你会发现我们使用了webpack后只需要引入我们自己的index.js文件就可使用jquery了！那么也就意味着我们的一个index.js文件处理可以包含jquery还可以包含vue/angularjs/reactjs等等

这样是不是就减少了页面引入的次数而且webpack还会对es6的语法进行处理，根本不需要担心代码的兼容问题，同时你的页面也会变得简洁！同时我们还可以引入css文件less文件scss文件等等

请认真阅读完上面的话，这可以帮助你解开心中的疑惑

webpack-dev-server（自动编译）使用

webpack 对css/less/sass的支持

转载于:https://www.cnblogs.com/Richard-Tang/p/9849063.html

Webpack4-基本使用相关推荐

Webpack4 学习笔记 - 01：webpack的安装和简单配置
安装 webpack 新建一个Demo文件夹,执行初始化: npm init 在Demo文件夹里安装 webpack 和 webpack-cli : npm install webpack webpa ...
webpack4升级指北
最近发现还是有听过人看这篇文章,所以再来更新一下.首先现在webpack4已经稳定,各个插件和loader基本上直接装都可以版本匹配,比如html-webpack-plugin,如果有不匹配的看pee ...
webpack4.x配置
总结下自己的配置的webpack,希望能帮助到大家同时也给自己做个笔记. 1.第一步配置前,我们新建一个文件夹"project",打开cmd命令输入 npm init 初 ...
webpack4.0打包优化策略(二)
打包优化策略 webpack4.0打包优化策略(一) webpack4.0打包优化策略(二) webpack4.0打包优化策略(三) 区分开发和生产环境通常我们在开发网页时需要区分构建环境开发环境 ...
进击webpack4 （优化篇）
进击webpack 4 (基础篇一) 进击webpack4 (基础篇二:配置一) 进击webpack4 (基础篇三:配置二) 不解析不依赖第三方模块的模块 noParse 有一些第三方模块,它本身 ...
webpack4 系列教程: 前言
1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...
webpack4.0让编译速度飙升
前端开发一个crm项目的时候,因为项目内容比较庞大,导致webpack编译和打包都巨慢,实在是影响开发效率,所以着手升级webpack. webpack4-es6-react webpack4-es6 ...
手摸手入门前端--01.webpack4
1.webpack基本概念 0配置 webpack4现在是支持0配置的基本概念 entry output loader plugins mode file module chunks compile ...
js知识点掘金_关于webpack4的14个知识点，童叟无欺
没有什么比时间更具有说服力了,因为时间无需通知我们就可以改变一切. 最近工作中用到了nuxt,才发现,如果webpack学的6,nuxt基本不需要学习,没什么学习成本的,因此,这篇重新记录下webpa ...
webpack4.0--如何安装和配置（一）
前言一直计划想把webpack系统的学一遍,现在终于开始了,接下来会分享我从零开始学习的过程,记录自己,分享他人,这篇文章主要分享安装和配置,也就是文档中Getting Started的学习. 如何 ...

Webpack4-基本使用

Webpack4-基本使用相关推荐

最新文章

热门文章