【笔记】webpack4.0教程_配置详解_图文_新手入门_快速上手
前言
这篇笔记会从node安装开始，到搭建基础的webpack环境为止。中间每一步的配置和遇到的术语、名词，我都会做简单的解释。
同时，这篇博文是一篇记录我学习webpack的过程笔记，因为我也在学习过程，如果有记述错误之处，欢迎指正。
【注：全程系统环境为 Windows，webpack 版本号：4.8.3】
一、安装所需软件
安装node
node：node是一种javascript的运行环境，能够使得javascript脱离浏览器运行（不做重点介绍）。
1.打开下载链接下载安装包：点击下载
2.安装好之后打开
命令提示符分别输入
node -v
npm -v
这里可以看到刚刚安装的node的版本号和npm的版本号（npm是node的附属品）
使用 cnpm
npm：npm（Node Package Manager）是一个基于 node 的包管理器。
包：凡是我们在前端项目中引用的文件，都可称为包（Package），比如JQuery、Bootstrap、Underscore。通过 npm 我们可以很方便的下载我们需要包的指定版本或者最新版本。我们要使用的 webpack 就是一个包。
cnpm：cnpm是淘宝团队做的 NPM 镜像，为什么要做使用 cnpm ？因为国内网络从npm 包普遍会很慢，所以要使用 cnpm
- 1.打开
命令提示符，输入
npm install -g cnpm --registry=https://registry.npm.taobao.org- 2,检验cnpm代替成功：命令行输入：
cnpm -v只要不提示 不是内部或外部命令 ，就代表你可以使用 cnpm 了。
二、初始化并安装 webpack
初始化 npm
- 1.选择一个你准备创建前端项目的目录，按住
shift键点击鼠标右键—>选择在此处打开命令窗口 - 2.输入
npm init -y在当前目录初始化 npm 并且使用默认配置，此时会在该目录下创建有个npm配置文件package.json
了解 webpack
首先，简单了解一下webpack：先看官网的介绍图。
webpack：webpack的作用就是把我们项目中所有需要的资源合并打包到一起。官方介绍就是让一切变得简单，具体想深入了解webpack的特点，推荐阅读官方文档：
安装 webpack
这里，我们需要明确一点，webpack属于一个npm的包，所以使用npm进行安装。
- 1.打开命令窗口，输入
cnpm install webpack webpack-cli --save-dev回车后就会在当前目录下安装webpack，并且会在该目录下多出一个文件夹 node_modules 后续，你通过 npm 安装的所有包都会被放在这个文件夹中。
- 2.打开
package.json, 看到有如下三行，就代表以及安装成功
"devDependencies": {//开发模式
"webpack": "^4.8.3",//插件名和版本号
"webpack-cli": "^2.1.4"//插件名和版本号
}需要补充的是，刚才输入的 --save-dev 的含义是：
①将所安装的包分类到开发模式下
②将安装过的包写入到 package.json 配置文件
三、使用 webpack
创建项目并使用 webpack 打包
1.首先，创建如下的目录结构和文件
2.其次，每个文件中的代码如下
./index.html：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script src="./dist/main.js">script>
body>
html>./src/index.js：
import {name} from './init';//引入 init.js 存于 name ， (js后缀可以省略)
alert(name);./src/init.js：
var name = "newApp";
export {//ECMAScript 6 语法 ， 向外暴露接口供其他文件调用时使用
name//将变量 name 指定为向外暴露成员
};- 3.在当前目录下—>按住
shift点击鼠标右键—>选择在此处打开命令窗口—>输入：
npx webpack这一行的含义是启用 webpack 进行打包。打包过程中会提醒错误，忽略掉就好，这是因为没有选择打包模式，虽然提示了错误，但 webpack 默认会采取生产者模式打包。
- 4.启动
index.html， 此时会在浏览器弹出输出 “newApp”。
至此，我们已经掌握webpack的安装-基础使用。
*【练习 】使用并打包 JQuery
通过这个小练习，目的是为了大家理解包（Package）这个概念，新手往往会在这里有混淆，同时，还有一个目的就是接触 es6 语法。
我推荐在看完我这篇笔记后，去了解并熟悉一下 es6 的使用。
- 1.使用
npm安装jquery包。在你项目根目录下启动命令窗口， 输入
cnpm i jquery --D这行命令中， i 是 install 的缩写。 --D 是 --save-dev 的缩写。
- 2.修改
./src/index.js里的内容
import $ from 'jquery';//引入Jquery
$(function(){
$("body").html("Hello world!");
}) - 3.在命令行中输入
npx webpack进行打包，然后打开index.html，网页中显示文字 “Hello world!” 说明jquery
已经使用
练习小结：
- 我们通过
npm安装了jquery和webpack，这两个都是npm的包。 - 包与包之间是平行关系，但对于开发来说，
webpack是一个工具，jquery是项目中使用的功能 - 我们使用
webpack这个包来管理其他的包 （jquery）
四、深入配置 webpack
学习使用 webpack 配置文件
我们已经知道，weboack 是一个管理其他包的工具，那么想要更加灵活自如的管理其它包，我们就需要某些设置，接下来我们来创建配置文件。
- 1.在项目根目录创建文件
webpack.congig.js
const path = require('path');//设置路径
module.exports = {//配置正式开始
entry: './src/index.js',//设置入口
output: {//设置打包出口
path: path.resolve(__dirname, 'dist'),//打包文件放在这个目录下
filename: 'main.js'//打包文件名
},
module: {},//loader 相关配置
plugins:[],//插件 相关配置
mode: 'development'//设置模式为开发者模式
};配置项其实也就只有五个，分别是 ： 入口 entry 、 出口 output 、Loader loader 、 插件 plugins 、 模式 mode
入口和出口，分别制定在哪里寻找项目依赖的资源文件，把资源文件打包后放在哪个目录下面。
插件：插件用来增加一些特定功能，比如，代码压缩。再比如，观察现在的项目，正个打包过程，都没有 html 文件参与进来。如果我们希望 html 文件也参与进来，就需要一个特定插件 html-webpack-plugin
了解并使用 loader
我们不详细介绍插件，但 loader 还是要讲讲。
我们前面提到，webpack 是用来打包项目依赖的资源的，但我们项目中的资源可谓是各式各样， webpack 默认只认得 js 文件，想让其他资源文件也参与进来，就需要使用 loader
接下来，我们就尝试用 style-loader 和 css-loader 来处理 css 资源
1.在项目目录下启动
命令窗口， 输入cnpm i style-loader css-0loader --D
【注】这里需要注释一下，无论是loader还是插件，相对npm来说都是一个包。这里初学者自己理一下关系，我们到目前为止，用到的jquery、webpack、stule-loader、css-loader还有将来要用到的webpack的插件，都属于npm的包。2.修改
webpack配置文件webpack.congig.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {//配置 loader
rules: [//相关规则写在这里
{
test: /\.css$/,//正则表达式：根据后缀为 .css 的文件来匹配 css 文件
use: [//匹配搭配 css 文件后，打包时使用以下 loader 来处理文件
{ loader: 'style-loader' },//loader 名称
{
loader: 'css-loader',//loader 名称
options: {
modules: true
}
}
]
}
]
},
plugins:[],
mode: 'development'
};- 3.创建css文件：
css/main.css
html{
background-color: aqua;
}此时项目下目录结构为
- 4/修改 js 入口文件
src/index.js
import $ from 'jquery';
import '../css/main.css';//引入css文件
$(function(){
$("body").html("Hello world!");
}) - 5.使用
webpack进行打包，打包后访问index.html，你会看到刚才的样式已经引用进去了。那么现在我们已经成功使用loader让webpack能够识别 css 格式的资源文件，并且打包到项目中了。
了解并使用 watch
watch：启动 watch 后 webpack 可以监听文件变化，当它们修改后会重新编译。
- 1.打包时在
命令窗口输入npx webpack --watch即可启动watch模式。之后再修改资源文件，webpack会自动打包。
结束语
本笔记旨在记录自己学习过程，同时初学者参考本笔记后可以从 node 安装开始，到搭建可以使用 loader并自动打包的 webpack 环境。
我使用的 webpack 版本为 4.8.3
因为我也是初学者，如果在笔记中有描述错误或者不到位的地方，欢迎指正，我会及时修改的。
๛ก(ｰ̀ωｰ́ก)