webpack (一) 浏览器中显示hello world

最新推荐文章于 2024-06-10 18:16:45 发布

飞天代码

最新推荐文章于 2024-06-10 18:16:45 发布

阅读量2.5k

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/74012391

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

nodejs也安装了， babel编译es5也学了，目前就差使用webpack来如何在现有的浏览器中查看一个简单功能。自然伟大的hello world 又要粉墨登场咯
第一步采用webstorm新建项目，具体细节不写了，如果还不会的可以查看我写的另外一篇博客：新建项目

项目结构如下
这里写图片描述

第二步：webpack.config.js添加到项目中
由于没有找到啥法子自动创建该文件我是手动创建的，并将下面内容copy进去

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loaders:"style-loader!css-loader"
        }]
    }
};

添加后的效果
这里写图片描述

里面具体的内容含义我就不解释了

第三步在项目根目录下添加index.css

body {
    background: cadetblue;
}

第四步在项目根目录下添加index.js

require('./index.css');
var [name]=["第一个列子"];
document.write('Hello World!!!!!ddddddddddddddddddddd'+name);

第五步在项目根目录下添加index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

到此为止文件都添加完毕
这里写图片描述

第六步开始执行命令咯

npm install style-loader --save

npm install css-loader --save

npm install webpack --save-dev

这里写图片描述
第七步修改package.json文件，在scripts中添加 start的执行方式

 "start": "webpack-dev-server --progress --colors"

这里写图片描述

第八步执行npm start 命令启动，如果没有报错误信息则可以输入 http://localhost:8080/执行看看效果
这里写图片描述

飞天代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack (一) 浏览器中显示hello world

nodejs也安装了， babel编译es5也学了，目前就差使用webpack来如何在现有的浏览器中查看一个简单功能。自然伟大的hello world 又要粉墨登场咯第一步采用webstorm新建项目，具体细节不写了，如果还不会的可以查看我写的另外一篇博客：新建项目项目结构如下第二步：webpack.config.js添加到项目中由于没有找到啥法子自动创建该文件我是手动创建的，并将
复制链接

扫一扫