您现在的位置是：首页 > 文章详情

webpack初体验

日期：2018-04-03点击：591收藏

●首先新建一个项目文件夹命名为WebPack2

项目文件

●用SubLime将其打开并在该文件夹中创建app.js、index.html和webpack.config.js(webpack配置文件)

webpack.config.js

module.exports={
    // 设置入口文件
    entry:'./app.js',
    // 设置编译输出后的文件名
    output:{
    path:__dirname,
    filename:'bundle.js'
    },
    mode:'development'
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>WebPack初体验</title>
    </head>
    <body>
        <!-- 这里是webpack.config.js里指定的输出文件 -->
        <script type="text/javascript" src="./bundle.js"></script>
    </body>
</html>

app.js

document.write('WebPack初体验');

接下来在该项目问价夹下打开命令行窗口用npm生成package.json

$ npm init --yes

package.json

{
  "name": "WebPack2",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}