webpack 简易入门(一)

分享 :
作者:51RGB
标签: webpack 前端构建

使用步骤

1.创建一个项目根目录(暂时叫myapp).不要起名叫webpack.在目录下 执行命令 npm init.会在目录下创建一个package.json文件.

2.执行命令 npm install --save-dev webpack.安装完成后项目下会多一个node_modules文件夹.

3.创建如下项目目录及文件

myapp
 |-src
    |- index.js
 |-dist
    |- index.html
 |-package.json
 |-webpack.config.js

   

index.html

<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="build.js"></script>
  </body>
</html>

index.js

document.write("hello world");

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, 'dist')
  }
};

package.json 只修改scripts部分

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

4.在项目根目录下执行命令 npm run build,执行成功后会看到dist目录下创建了一个build.js

文章分类