webpack搭建前端项目

最新推荐文章于 2024-03-29 10:05:03 发布

欣欣欣白白白

最新推荐文章于 2024-03-29 10:05:03 发布

阅读量1.5k

点赞数

分类专栏： react-vue 文章标签： node.js 前端管理

本文链接：https://blog.csdn.net/lqx_sunhan/article/details/79662069

版权

react-vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文适合小白看，本人是个后台，不过对前端技术颇具兴趣，日前刚好搭建了一个项目，写个文章分享出来，步骤都很详细,对webpack和react不熟的小伙伴可以看看。

1.下载安装node.js

官网下载安装即可，安装好后默认会自动安装好npm包管理，我们打开cmd控制台，输入node -v 和 npm -v 出现对应的版本信息，则为安装成功

2.新建一个项目目录,进行npm初始化

我在d盘下新建了一个my-app,然后命令行cd进入此项目目录,命令 npm init 进行一下package.json的初始化，这个文件主要就是用来管理npm包的。输入命令后一直回车确认就行。

3.

初始化webpack.命令 npm install webpack --save -dev
这是仅仅将包安装在我们的项目目录，也可以全局安装，全局安装是在node的一个AppData文件夹里面，全局安装时npm install webpack -g.不建议使用全局，执行完应该会生成一个node_modules文件夹和一个package-lock.json.

4.下载相关的依赖包

1.babel相关

npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 --save-dev

npm install babel-preset-react --save-dev

2.react的包

npm install react react-dom --save-dev

5.在项目根目录新建一个webpack.config.js。这是webpack的核心配置文件。基础配置可以参照以下:

const  webpack = require('webpack');
const path = require('path');
module.exports = {
    mode: 'development',
    // 这个配置是项目的入口文件的配置
    entry: {
        myBuild: './src/index.js' 
    },
    output: {
        // 这个是指定项目打包后的输出目录,__dirname就是webpack.config.js所在的目录,这里就是打包时打包到项目根目录下的build文件夹下(如没有webpack会自己创建)
        path: path.resolve(__dirname, './build'),
        // 这个是关系到我们项目发布后，一些资源的访问路径问题，后面会讲到，而且这个也跟我们开发时候的热部署有关，让他指向我们的打包后的路径就行。
        publicPath:"build/",
        // 这是打包后的js文件名字,这个[name]就是我们在上面的entry中指定的Key.也就是myBuild
        filename: '[name].js' 
    },
    // 这是跟服务相关的配置，具体可以去看官网
   devServer: {
    port:9090 //端口你可以自定义
   },
   // 下面的配置主要就是一些loader.关于loader我的理解就是配置一些webpack对于各种资源的打包规则
     module: {
         rules: [
             {
                 test: /\.js$/,
                 exclude: /(node_modules|bower_components)/,
                 use: {
                     loader: 'babel-loader',
                     options: {
                         presets: ["es2015","react",'stage-0']
                     }
                 }
             },
             {
                 test: /\.css$/,
                 use: [ 'style-loader', 'css-loader' ]
             },
             {
                 test: /\.(png|jpg|gif)$/,
                 use: [
                     {
                         loader: 'file-loader',
                         options: {
                             name: '[name]_[hash].[ext]',
                             outputPath: './img',
                             publicPath: 'build/img/'
                         }
                     }
                 ]
             },
             // {
             //     test: /\.(png|jpg|gif)$/,
             //     use: [
             //         {
             //             loader: 'url-loader',
             //             options: {
             //                 limit: 8192,
             //             }
             //         }
             //     ]
             // },
             {test: /\.json$/, loader: 'json-loader'},
             {test: /\.(woff|woff2|svg|eot|ttf)$/, loader: 'url-loader?limit=50000&name=fonts/[name].[hash].[ext]'}
        ]
    }
}

6.在根目录下新建一个index.html,内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./build/myBuild.js"></script>
</body>
</html>

主要就是引入打包后的myBuild.js以及写好id为app的入口。

7.新建一个index.js,这个文件就是我们webpack.config.js中的entry中的文件，若配置时有目录则我们建好相应的目录，我这里的index.js是在src下，所以我们建立一个src的文件夹。

此时的目录结构是这样的，在src下有index.js。
这里写图片描述

8.在index中写入以下代码进行测试。

setTimeout(() => { alert(“author: sunh”)}, 1000);

9.cmd保证此时是在项目根目录下的，执行打包命令

webpack这个命令用于打包，这需要保证webpack.config.js是这个名字，若你想用其他名字，则需要使用webpack –config 文件名来进行打包。若没错的话，这时应该会报错:
这里写图片描述

10.安装webpack的脚手架，因为以上错误，官方说webpack-cli已经移出去到单独的包了，所以我们安装下。

npm install webpack-cli –save -dev

11.执行打包命令 webpack ,会看到生成一个build目录，然后我们的js文件生成了，并且名字是我们自己指定的myBuild.js.

12.打开index.html，看到弹出了author: sunh,,说明打包成功，到这里就结束了。

欣欣欣白白白

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
webpack搭建前端项目

本文适合小白看，本人是个后台，不过对前端技术颇具兴趣，日前刚好搭建了一个项目，写个文章分享出来，步骤都很详细,对webpack和react不熟的小伙伴可以看看。1.下载安装node.js官网下载安装即可，安装好后默认会自动安装好npm包管理，我们打开cmd控制台，输入node -v 和 npm -v 出现对应的版本信息，则为安装成功2.新建一个项目目录,进行npm初始化...
复制链接

扫一扫