Webpack4-基本使用

时间 2019-11-17

标签 webpack4 webpack 基本使用繁體版

原文原文链接

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

使用Webpack须要安装Node.js运行环境（下一步下一步便可）html

安装nrm（使用nrm能够切换Node.js安装包时的镜像源，这样能够提升咱们安装工具的速度）vue

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

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

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

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

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

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

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文件夹！jquery

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

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

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

这边我在src目录下建立一个index.html和index.js（注意这里有坑，当你在后面打包项目的时候webpack4会去你的src目录下找有没有index.js文件若是找不到就会报错）因此这里你们尽可能和我同步es6

建立完后咱们在经过命令来安装一个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的支持