webpack4.0教程_配置详解

发布于 2020-11-11  69 次阅读


安装所需软件

  • 1.安装node
    打开下载链接下载安装包:点击下载
    node:node是一种javascript的运行环境,能够使得javascript脱离浏览器运行(不做重点介绍)。
  • 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 在当前目录初始化 npm 并且使用默认配置,此时会在该目录下创建有个npm配置文件 package.json

了解 webpack

首先,简单了解一下webpack:先看官网的介绍图。
webpack:webpack的作用就是把我们项目中所有需要的资源合并打包到一起。官方介绍就是让一切变得简单,具体想深入了解webpack的特点,推荐阅读官方文档:

安装 webpack

这里,我们需要明确一点,webpack属于一个npm的包,所以使用npm进行安装。
1、打开命令窗口,输入

cnpm install webpack --save-dev //安装webpack
cnpm install webpack-cli --save-dev //安装webpack-cli

回车后就会在当前目录下安装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、其次,每个文件中的代码如下

<!DOCTYPE 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>Document</title>
</head>
<body>
    <script src="./dist/main.js"></script>
    <!-- src引入的文件将在接下来由 webpack 打包创建 -->
</body>
</html>
import {name} from './init';//引入 init.js 存于 name , (js后缀可以省略)

alert(name);
var name = "newApp";

export {//ECMAScript 6 语法 , 向外暴露接口供其他文件调用时使用
    name//将变量 name 指定为向外暴露成员
};

3、新建webpack.config.js文件,配置webpack

const path = require('path');
let obj = {
    mode: 'development',
    entry: {
        app:'./2.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
};
module.exports = obj;

4、在当前目录下—>按住 shift 点击鼠标右键—>选择 在此处打开命令窗口—>输入:

npx webpack

这一行的含义是启用 webpack 进行打包。打包过程中会提醒错误,忽略掉就好,这是因为没有选择打包模式,虽然提示了错误,但 webpack 默认会采取生产者模式打包。
5、启动 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 <b>world</b>!");  
})  

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-loader --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 <b>world</b>!");  
})  

5、使用 webpack 进行打包,打包后访问 index.html ,你会看到刚才的样式已经引用进去了。那么现在我们已经成功使用 loader 让 webpack 能够识别 css 格式的资源文件,并且打包到项目中了。

了解并使用 watch

watch:启动 watch 后 webpack 可以监听文件变化,当它们修改后会重新编译。

  • 1.打包时在 命令窗口 输入 npx webpack --watch 即可启动 watch 模式。之后再修改资源文件, webpack 会自动打包。

๛ก(ー̀ωー́ก)


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。