webpack 简单安装步骤和配置

2022-03-21 20:46:55 浏览数 (1)

作者:汪娇娇

时间: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、目录图:

0 人点赞