【webpack学习随笔】2.如何配置和启动项目

base, webpack

安装依赖

1
npm install webpack webpack-cli html-webpack-plugin webpack-dev-server cross-env -D

新建webpack配置文件

在项目根目录下新建webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  context: process.cwd(),
  devtool: "source-map",
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

配置启动服务和构建命令

1
2
3
4
5
6
7
8
{
  ...
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  },
  ...
}

配置完成后测试

  • 启动服务 

    1
    npm start

  • 构建

    1
    npm run build

下一节

本文作者： haise
本文地址： https://www.shifeng1993.com/2020/12/05/webpack_4/
版权声明： 转载请注明出处！