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

来源：互联网发布：esxi添加网络文件系统编辑：程序博客网时间：2024/05/16 14:49

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 --savenpm install css-loader --savenpm install webpack --save-dev

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

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

这里写图片描述

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

阅读全文

0 0