webpack学习（一）：初步配置一个简单的webpack项目

最新推荐文章于 2023-12-23 15:45:40 发布

不知名的小五

最新推荐文章于 2023-12-23 15:45:40 发布

阅读量870

点赞数 3

分类专栏：技术学习文章标签： webpack

本文链接：https://blog.csdn.net/weixin_40184174/article/details/85117015

版权

技术学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、关于webpack安装

当然，在安装webpack之前，你的本地需要已经安装好nodejs

全局安装

npm install --global webpack                         // 全局安装webpack

本地安装

npm install webpack                                  // 本地安装webpack

二、初始化

创建一个初始项目文件目录文件夹，例如（test01），通过cmd（或编辑器自带命令行工具）进入到项目文件夹目录下，运行

npm init                                            // 初始化项目结构信息，并生成package.json进行记录

注：当然，值得一提的是初始化过程中键入的信息不必太在意，实在不知道写什么一直敲击回车就行了

三、目录结构

在这里插入图片描述

其中build文件夹是打包后生成的目录，我们只需要手动创建
app文件夹（用于存放源js、css文件）；
public文件夹（用于存放源html模板）；
webpack.config.js（webpack配置的默认文件）；

四、创建并编写源代码文件

// Greeter.js
module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!";
    return greet;
};

//main.js 
import './style.scss'                                       
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

<!-- index.html -->
<!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><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

值得注意的几个点：

css或者scss等样式文件、以及图标、字体、图片等文件需要在入口文件导入（例如此处为main.js文件）
html中的title标签可以用<%= htmlWebpackPlugin.options.title %>代替（后续会在webpack配置文件中定义title并插入这里）

五、打包依赖安装

在配置webpack之前，我们需要安装一些使用到的依赖包：

    "css-loader": "^1.0.1",                                  
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"

以上是需要用到的依赖包，后面是版本号，安装命令如下：

npm install （依赖包名称）--save-dev

解释一下：

需要打包scss，则需要安装node-sass和sass-loader（同理，如果需要使用其他预编译处理文件，可以去查一下相关的依赖包）
我们也要安装一些打包css样式相关的插件：（–save-dev是将插件添加到devDependencies中）
css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；
style-loader将所有的计算后的样式加入页面中；
二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
简单来说，file-loader 就是将文件（一般是图片文件为主，其他的包括字体文件等），在进行一些处理后（主要是处理文件名和路径），移动打包后的目录中；
html-webpack-plugin插件用于打包html文件。简单点说，就是原本我们在打包完js、css文件之后，还需要在html中手动引入。而该插件能帮助我们在生成css、js文件的同时将这些文件自动引入到我们的输出html文件中（一般来说，我们使用这个插件的时候，需要在配置中为它提供源模板、文件名、chunk等等，可以参考后面的配置文件代码。当然，它还有很多的参数我们这里就不介绍了，有需要的可以去webpack官网查一查该插件的相关说明和使用）

值得注意的地方，为了让打包后样式生效，有两种方法，一种是使用style-loader自动将css代码放到生成的style标签中插入到head标签里。另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包（打包输出的文件由配置文件中的output属性指定）。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件

因此要将css文件和js文件打包的时候独立分开，可以使用extract-text-webpack-plugin插件
（注意！！！在这里说明一点，该插件可以说是服务于webpack4之前的版本，而在webpack4+版本以后已经有mini-css-extract-plugin插件来代替它。如需了解更多提取、压缩等等的知识，请移步后续webpack学习关于提取、压缩的博客）

再注意一点，鉴于刚刚提到的webpack 4+版本问题问题影响，使用extract-text-webpack-plugin插件可能会发生版本相关问题的报错，如果还是要使用该插件，此时我们也可以运行以下命令解决：

npm install extract-text-webpack-plugin@next --save-dev

安装完成后，你会发现项目目录多了node_modules文件夹，我们安装的依赖包都在这里

六、webpack配置文件编写

本测试项目的webpack.config.js完整代码如下：

const path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');  // 将css样式从js文件中分离出来
var HtmlWebpackPlugin = require('html-webpack-plugin');          // 打包html的插件

module.exports = {
    entry:  {
        bundle: __dirname + '/app/main.js'               // 入口文件
    },
    
    output: {
        path: path.resolve(__dirname, './build'),        // 打包后的文件存放的地方
        filename: "./js/[name].js"                       // 打包后输出文件的文件名
    },
    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [
                'style-loader', 
                'css-loader',
                'sass-loader',
            ]
        },{
            test: /\.(png|svg|jpg|gif)$/,
            use: [{
                  loader: 'file-loader',
                  options: {
                    name: '[name].[ext]',
                    outputPath: './img'
                  }
                }
              ]
        },{
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: 'font/[name].[ext]',
                    outputPath: './fonts'
                }
            }]
        }
        ]
    },
    plugins: [
        new ExtractTextPlugin("./css/base.css"),          // 提取出来的样式放在base.css文件中
        new HtmlWebpackPlugin({                           // 用于打包html文件
            title: 'Webpack test01',                      // HTML title
            filename:'index.html',                        // 打包后的HTML文件名
            template:'public/index.html'                  // 模板路径以及文件
        }) 
    ]
}

关于webpack的配置的几个基本概念：入口entry、出口output、loader、插件plugins等等不理解的，建议去仔细阅读webpack官方文档，边看文档边做练习，相信你会有很多的收获

七、修改运行命令

我们可以在package.json的scripts中增加npm运行命令，如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

这样修改之后，我们便可以在项目目录下通过运行以下命令进行打包

 npm run build

打包完成后，会根据配置中的output生成输出目录（本例中为在项目目录下输出build目录）
在这里插入图片描述
点开各个文件，可以看到熟悉的代码（鸡冻~）
其中，我们来看看index.html文件

<!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>Webpack test01</title>
<link href="./css/base.css" rel="stylesheet"></head>
<body>
    <div id="root"></div>
<script type="text/javascript" src="./js/bundle.js"></script></body>
</html>

我们可以看到，相对比之前的模板文件，该文件已经自动为我们插入编译完的js、css文件
直接用浏览器打开打包生成的html文件，结果如下：
在这里插入图片描述
可以看到，运行结果符合预期，本次学习和测试告一段落~~~

不知名的小五

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
webpack学习（一）：初步配置一个简单的webpack项目

一、关于webpack安装当然，在安装webpack之前，你的本地需要已经安装好nodejs全局安装npm install --global webpack // 全局安装webpack本地安装npm install webpack // 本地安装webpack二、初始...
复制链接

扫一扫