前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >webpack 简单安装步骤和配置

webpack 简单安装步骤和配置

作者头像
jojo
发布2022-03-21 20:46:55
4580
发布2022-03-21 20:46:55
举报
文章被收录于专栏:jojo的技术小屋

作者:汪娇娇

时间:2017年8月11日

1、安装webpack

(1)全局:npm install -g webpack

(2)项目文件夹(cmd跳转到项目的文件夹):npm install --save-dev webpack

2、package.json(一直按enter键)

npm init

3、安装loader

(1)npm install --save-dev style-loader css-loader

(2)npm install --save-dev url-loader

4、webpack.config.js

代码语言:javascript
复制
var webpack = require('webpack');

module.exports = {
    entry: __dirname+'/app/main.js',

    output: {
        path: __dirname+'/public',
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {test: /\.css$/,loader: 'style-loader!css-loader'},
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}
        ]
    }
};

5、main.js

代码语言:javascript
复制
require('./main.css');
require('./Greeter.js');

6、index.html

代码语言:javascript
复制
<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

7、目录图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/08/11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、安装webpack
  • 2、package.json(一直按enter键)
  • 3、安装loader
  • 4、webpack.config.js
  • 5、main.js
  • 6、index.html
  • 7、目录图:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档