前端工程环境配置模版webpack

104 阅读1分钟

1、新建文件夹demo

mkdir demo

2、新建package.json文件

npm init

3、安装webpack、webpack-cli、webpack-dev-server

npm install webpack webpack-cli webpack-dev-server -D

4、配置webpack.config.js文件

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(\_\_dirname, 'dist'),
        filename: 'bundle.js',
    },
    devServer: {
        static: './dist',
        port: '8088'
    }
};

5、配置package.json文件,增加scrips部分

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack serve --open --mode=development",
    "build": "webpack"
   }

6、新建index.html文件

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

7、编辑js内容

console.log('Hello World')

8、编译

  yarn build

9、运行

  yarn start

10、访问链接,输出Hello World

  http://localhost:8088/