webpack打包

最新推荐文章于 2024-07-16 16:20:26 发布

y_qingcheng

最新推荐文章于 2024-07-16 16:20:26 发布

阅读量355

点赞数

CC 4.0 BY-SA版权

文章标签： webpack 打包css

本文链接：https://blog.youkuaiyun.com/y_qingcheng/article/details/79483811

本文详细介绍了如何使用Webpack进行前端项目的构建，包括全局安装Webpack、创建项目文件结构、配置Webpack配置文件、安装并配置Loader以及设置自动编译等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. cnpm i webpack -g //全局安装webpack

2. 新建文件夹 app APP文件夹下新建 index.html style.css second.js

2. 在app文件夹下新建 index.js文件 require（‘./style.css’）加载css文件 require（‘./second.js’）加载js文件

3. app同级文件下新建 webpack.config.js

let path = require('path');

module.exports = {
    entry: "./app/first.js",  //入口文件
    output: {
        filename: 'dist/bundle.js',   //出口文件
        path:  __dirname
    },
    module:{
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}