webpack编译文件的疑问

我新建了一个index.html如下：

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

同时新建了一个entry.js入口文件如下：

document.write('hello world.')

然后执行$ webpack entry.js bundle.js

貌似成功了！

但是发现bundle.js中什么都没有，浏览器中也没东西，反而是生成了一个dist文件夹，里面有个mian.js
我修改index.html:

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="dist/main.js"></script>
</body>
</html>

这时候浏览器显示hello world

疑问：
为什么没有如我所愿的将entry.js代码打包到bundle.js ?

webpack javascript

阅读 2.3k

3 个回答

得票最新

呆恋小喵

745213

发布于
2018-08-31

可以自行配置：

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry: './entry.js',
    // ----------------------- 请关注这里 -----------------------
    output: {
        path: './dist',
        filename: 'bundle.min.js',
    },
    devServer: {
        port: 8000,
        inline: true,
        contentBase: './src'
    },
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: 'style!css!less'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.(jpg|png|svg)$/,
                loader: 'url'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};