webpack4配置vue项目----1.初始化

这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录

创建项目

创建项目根目录myWebpack，在根目录下创建src目录，src下创建main.js作为主入口文件，在根目录下创建package.json文件，public公共资源目录，dist打包目录。结构如下

图片1.png

package.json文件可以使用npm init指令来创建。这里我们直接手动创建，并填入下面的内容。

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
         "build": " webpack --config webpack.config.js --mode production"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {},
    "dependencies": {}
}

安装webpack

首先确保使用了node的最新发布版本。然后要安装最新版本或特定版本的webpack，请运行以下命令之一，本项目使用webpack4.41.2版本

npm install --save-dev webpack
npm install --save-dev webpack@4.41.2

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli

创建配置文件webpack.config.js

在项目根目录下创建webpack.config.js，并指定入口和输出目录

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'js/[name]-[hash].js',//打包出的脚本文件全部放进dist下的js目录
    path: path.resolve(__dirname, 'dist'),//指定输出目录
    publicPath:'/',//使用绝对路径
  }
};