webpack 学习第4天，webpack 每日一练

最新推荐文章于 2025-11-17 10:00:00 发布

原创最新推荐文章于 2025-11-17 10:00:00 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何使用Webpack进行项目打包，从创建项目、安装依赖到配置Webpack并最终打包输出，适合Webpack初学者快速上手。

1，webpack 每日一练，最基本的使用

2，创建新项目

npm init

3，安装用到的包

npm install webpack@3.10.0 style-loader css-loader --save

4，创建主页面 index.html

<!--Created by Sukla on 2018/3/1.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

5，创建打包入口文件 entry.js

/**
 * Created by Sukla on 2018/3/1.
 */
require('./style.css')
document.write(123)
document.write(require('./module.js'))

6，创建样式表 style.css

body{
    background: #005aa0;
}

7，创建脚本文件 module.js

/**
 * Created by Sukla on 2018/3/1.
 */
module.exports=3456

8，创建webpack打包配置文件 webpack.config.js

/**
 * Created by Sukla on 2018/3/1.
 */
var webpack=require('webpack')

module.exports={
    entry:'./entry.js',
    output:{
        path:__dirname,
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {test:/\.css$/,loader:'style-loader!css-loader'}
        ]
    },
    plugins:[
        new webpack.BannerPlugin('This file is created by Sukla.')
    ]
}

9，开始打包