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

安装依赖

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

下一节