webpack入门（开发环境）

北陌逍遥
651 阅读6分钟

打杂怪的webpack基础

前言

随着三大框架的日渐成熟，我们已经很少自己去配置webpack了，因为三大框架已经对webpack进行了相应的配置，有些时候我们只需要在它的基础上去做一定的优化。

虽然是这么说，但是在面试的时候我们还是会被问到webpack的相关信息，此文就带大家打开webpack的大门。

webpack的作用

  • 页面多使得代码体积过大，使得网页加载速度变慢，使用webpack可以压缩代码。

  • 模块化，让我们可以把复杂的程序细化为小的文件。

  • 转换，把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

一、基本的使用

在使用webpack之前，我们先要保证node是已经安装好了的。webpack提供本地安装和全局安装，不过我推荐本地安装，因为本地安装最关键的就是解决了不同项目对不同包的版本依赖问题，全局安装则做不到。

1.1 对项目进行初始化

首先我们先新建一个名为webpack-demo的文件夹，然后初始化npm。

$ npm init -y

初始化一个默认的package.json配置。

1.2 安装webpack

在webpack-demo目录下执行：

$ npm install webpack webpack-cli -D

在package.json的devDependencies里可以看到刚刚安装的webpack和webpack-cli

二、使用webpack配置文件

在webpack-demo目录下建立一个src文件夹，然后在src文件夹下建立一个index.js文件，在里面随便写个打印出来的数据。

// index.js
console.log("this is index js")

之后在webpack-demo目录下建立一个webpack.config.js的配置文件。

// webpack.config.js
const path = require('path')  //node js提供的一个path

module.exports = {
   mode: 'development', // 
   entry: path.join(__dirname, 'src', 'index.js')  //也可以写成'./src/index.js'
   output: {
        filename: 'bundle.js',   
        path: path.join(__dirname, 'dist') 
        
   }
}

在package.json里的scripts下添加运行命令

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

（打包成功后我们可以看到，在webpack-demo目录下多出了一个dist文件夹，里面就是输出的bundle.js文件）

三、插件和启动服务

3.1 html-webpack-plugin插件的使用

在src目录下新建一个index.html网页文件，并且安装一个webpack插件。

$ cnpm install html-webpack-plugin -D

这个插件是为了解析html文件，可以不需要我们手动的去新建一个html文件，在运行webpack的命令后它会自动的创建。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>webpack demo</h1>
</body>
</html>

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'), // 找到已有的html
            filename: 'index.html' // 产出新的html
        })
    ]
}

（html-webpack-plugin也可以在原有的html文件基础上产出新的html文件）

3.2 启动webpack server服务

在webpack-demo目录下安装webpack-dev-server依赖，在moudle.exports里填写devServer。

$ npm install webpack-dev-server -D

//webpack.config.js
    devServer: {
        port: 3006,
        contentBase: path.join(__dirname, 'dist')
    }

// package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  }

（在package.json下的scripts下添加启动服务的命令，这样打开浏览器3006端口就会显示相应的页面）

四、管理资源

4.1 ES6编译为ES5

安装所需要的依赖。

$ npm install @babel/core @babel/preset-env babel-loader -D

在moudle.exports下新增module：

// webpack.config.js
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader'],  // 转义
                include: path.join(__dirname, 'src'),   // src文件夹下的文件需要用到
                exclude: /node_modules/
            }
        ]
    },

在webpack-demo目录下创建.babelrc文件

// .babelrc文件
{
    "presets": ["@babel/preset-env"]
}

可能你会对以上一些代码不了解，没关系，我们来看下新增的部分，@babel/core相当于官方标记，其实就是一个更新的版本,它可以方便各个插件分析语法进行相应的处理，例如以上代码，可以把es6的语法转为es5的语法，有助于解决浏览器的兼容性问题。

test里的参数是用正则去匹配后缀名为js的文件。

Babel 推荐使用@babel/preset-env套件来处理转译需求,顾名思义，preset即“预制套件”，包含了各种可能用到的转译工具。之前的以年份为准的preset已经废弃了，现在统一用这个总包。

webpack处理静态文件的时候需要使用loader来加载各类的文件，比如：html文件需要使用html-loader,css需要使用css-loader、style-loader等等。而babel-loader就是来处理ES6语法的。

4.2 加载 CSS

通过文章4.1ES6语法处理，应该了解了loader的用法，那么接下来我们来试试怎么加载css文件。 我们先在src文件夹下创建一个css文件，并且对页面的样式进行一些处理。

/* style.css */
h1{
    color: orange;
}

之后我们将其引入到index.js中。

//index.js
import './style.css';

//也可以使用require()的方式引入
const style = require('./style.css');

在项目中安装如下两个loader：

  • style-loader
  • css-loader
$ npm install style-loader css-loader -D

安装完成后，和文章4.1的处理方式相同，在webpack.config.js的module中进行配置。

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }

通过正则方式匹配所有后缀名为css的文件，都将被style-loader和css-loader转换。

需要注意的一点是：

style-loader要放到css-loader前面, 不然打包的时候就会报错了。

这是因为loader的执行顺序是从右往左，从下往上的，webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面。

css-loader它是能识别导入的css这个模块，它输出的是一个数组，页面无法去识别这个数组，所以要搭配style-loader来使用。

style-loader则是通过JS脚本生成一个style标签。

4.3 加载图片

以上我们对css的加载进行了处理，那么我们的背景和图标这些图片该如何处理呢？这时候我们就可以使用file-loader，它可以轻松地将这些内容混合到 CSS 中：

$ npm install file-loader -D

对webpack.config.js下的module做以下配置：

// webpack.config.js
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ["file-loader"]
            }
        ]
    }

当你引入图片的时候，该图像将被处理并添加到 output 目录，并且引入变量将包含该图像在处理后的最终url，现在还不明白这句话的意思是正常得，接下来我们向项目添加一个图像，然后看看它是如何工作的。

/* style.css */
h1{
    color: orange;
}

.backimg{
    background: url('./icon.png');
}

index.js更改的部分如下：

// index.js
function component() {
    var element = document.createElement('div');

    element.classList.add('backimg')

    // 将图像添加到div
    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);
    
    return element;
}

document.body.appendChild(component())

感谢大家

这是我第一次写关于前端的文章，主要是想记录一下自己的学习过程和所学的知识，写的不好请多多担待。

如果你觉得这篇文章对你有帮助的话就点个赞支持一下吧，文章中有错误地方可以再下面留言，我会及时的去做修改的。

最后的最后，感谢大家的支持（≧◇≦）。

avatar
文章
阅读
粉丝