一、关于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>
    <  charset=\"UTF-8\">
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <  http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
    < ><%= htmlWebpackPlugin.options.  %></ >
</head>
<body>
    <div id=\"root\"></div>
</body>
</html>

值得注意的几个点：

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

五、打包依赖安装

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

    \"css-loader\": \"^1.0.1\",                                  
    \"extract-text-webpack-plugin\": \"^3.0.2\",
    \"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

解释一下：

  1. 需要打包scss，则需要安装node-sass和sass-loader（同理，如果需要使用其他预编译处理文件，可以去查一下相关的依赖包）

  2. 我们也要安装一些 打包css样式相关的插件：（–save-dev是将插件添加到devDependencies中）
    css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；
    style-loader将所有的计算后的样式加入页面中；
    二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

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

因此要将css文件和js文件打包的时候独立分开，可以使用extract-text-webpack-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: [{
                //解析.scss文件
                test: /\\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback:\"style-loader\",
                    use:[\"css-loader\",\"sass-loader\"]
                })
            },{
                //解析.css文件
                test: /\\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: \"style-loader\",
                    use:[\'css-loader\']
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin(\"./css/ .css\"),          // 提取出来的样式放在 .css文件中
        new HtmlWebpackPlugin({                           // 用于打包html文件
             : \'Webpack test01\',                      // HTML  
            filename:\'index.html\',                        // 打包后的HTML文件名
            template:\'public/index.html\'                  // 模板路径以及文件
        }) 
    ]
}

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

七、修改运行命令

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

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

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

 npm run build

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

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <  http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
    < >Webpack test01</ >
<  href=\"./css/ .css\" rel=\"stylesheet\"></head>
<body>
    <div id=\"root\"></div>
<  type=\"text/ \" src=\"./js/bundle.js\"></ ></body>
</html>

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章