当前前端开发，90%的项目都是Vue和React，然而70%的同学都基于脚手架创建项目，因为脚手架会包含项目基本框架、webpack配置、scss/sass/less解析、babel配置、DevServer、JSX/Vue文件解析、CSS前缀等，我们要做的就是开发功能模块，也就是开箱即用。

如果不用脚手架，我们怎么编写配置？此文章要求对Vue/React有一点基础.

技术文档：

Webpack: https://www.webpackjs.com/

Vue: https://cn.vuejs.org/

React: https://react.docschina.org/

开发环境

IDE推荐VSCode、浏览器推荐Chrome/Edge、Node版本：v12.13.0

创建项目

# 进入工作空间cd workspace# 创建项目mkdir webpack-demo (window用户直接右键创建)# 进入到项目中cd webpack-demo# 初始化配置(默认一路回车)npm init

打开项目

创建目录

node_modules：项目依赖目录，提前创建是为了添加gitignore

public：Vue项目静态目录，仿Vue4.0脚手架

src：项目源码

.gitignore：忽略Git提交文件

初始化为Git项目(方便管理)

# 终端下执行git init

编写代码(基础部分直接上代码)

index.html

# public下index.html            Vue    

main.js

# main.js入口import Vue from 'vue'import App from './app.vue'new Vue({    el:'#app',    render:(h)=>h(App)})

app.vue

export default { name:'app', data(){ return { title:'Hello Vue' } } } .app{ text-align: center; }

创建Webpack配置

webpack默认配置：webpack.config.js，不建议修改名字

前端常用规范：AMD、CMD、CommonJS、ES，webpack遵循的是CommonJS规范，需要使用module.export导出。

打包基本配置

# webpack4.42版本，内容讲解module.exports = {    mode:'development',//指定环境，生成：production    entry:'./src/main.js',//项目入口    //项目输出    output:{        // [name]指原名字         // [hash]会生成hash串添加在name后面        filename:'[name].[hash].js',        // 打包输出目录        //__dirname是node语法，指当前目录意思        path:__dirname+'/dist',        // 根路径默认/，用在打包后的js/css上面        publicPath:'/',        // 打包模块名称        library:'webpack-demo',        // 打包模块方式，umd实际上是AMD+CMD混合        libraryTarget:'umd'    }}

通过library设置后如下：

注：以上代码只是打包的基础配置，只能打包原生JS，还不能编译Vue项目。

安装依赖

分析Vue文件，我们会发现，包含ES6、.vue、scss语法所以我们需要安装对应插件。

开发Vue项目，必然需要安装Vue

cnpm i vue -S# OR cnpm install vue --save

--save 和 --save-dev区别：save会保存在dependencies里面，save-dev会保存在devDependencies里面，项目生产依赖用save，项目开发依赖用dev.

安装loader

# vue-loader 解析.vue文件vue-loader vue-template-compiler# 解析scss/sass语法node-sass sass-loader# 添加样式前缀 postcss-loader autoprefixer# 把scss/less转换为csscss-loader# 把css转化为style样式style-loader# 解析ES6语法(必须安装三个)@babel/core @babel/preset-env babel-loader# 解析图片(file-loader增强版)url-loader file-loader# 安装到dev依赖中cnpm i vue-loader vue-template-compiler node-sass sass-loader postcss-loader autoprefixer css-loader style-loader @babel/core @babel/preset-env babel-loader url-loader file-loader -D

以上是针对本次Vue项目所需要安装的插件和loader

/** * webpack4.42版本，内容讲解 * module可以设置模块解析规则和loader * test 校验规则 * use 加载loader，从右往左 * exclude 排除目录 * include 包含目录 */module.exports = {  // mode、entry、output参考上面  module:{        rules:[            {                test:/\.css$/,                use:['style-loader','css-loader','postcss-loader'],                exclude:/node_modules/,                include:/src/            },{                test:/\.vue$/,                loader:'vue-loader',                exclude:/node_modules/,                include:/src/            },{                test:/\.(js|.jsx)$/,                loader:'babel-loader',                exclude:/node_modules/,                include:/src/            },{                test:/\.(png|jpg|gif|svg)$/,                use:{                    loader:'url-loader',                    options:{                        // 10k以下用base64                        limit:10                    }                },                exclude:/node_modules/            },{                test:/\.(scss|sass)$/,                use:['style-loader','css-loader','postcss-loader','sass-loader'],                exclude:/node_modules/,                include:/src/            }        ]    }}

安装webpack

# 打包必须webpack webpack-cli # 启动本地服务器webpack-dev-server# 安装到开发依赖中cnpm i webpack webpack-cli webpack-dev-server -D

安装webpack-plugin

# 清空文件夹clean-webpack-plugin# html抽取打包html-webpack-plugin# 复制插件copy-webpack-plugin# 安装到开发依赖中cnpm i clean-webpack-plugin html-webpack-plugin copy-webpack-plugin -D

webpack-plugin配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');const VueLoaderPlugin = require('vue-loader/lib/plugin');const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = {    // mode/entry/output/module参考上面    plugins:[        // 打包前清空目录        new CleanWebpackPlugin(),        // 解析Vue需要配合插件使用        new VueLoaderPlugin(),        // 复制public内容到dist里面去        // vuecli4.0会生成public文件夹，里面包含index.html和静态资源        // 此处通过复制插件，在打包时，将public全部拷贝过去        new CopyWebpackPlugin([            {                from : __dirname + '/public',                to : __dirname + '/dist',                ignore: ['.*']            }        ]),        // html打包插件，会自动把js插入进去        new HtmlWebpackPlugin({            template:'public/index.html'        }),    ]}

DevServer配置

// 通过本地服务器访问Vue项目module.exports = {  devServer:{        // 服务根目录        contentBase:__dirname+"/dist",        // 服务主机        host:'localhost',        // 服务端口        port:8080,        // 代码热更新        hot:true,        // 默认打开浏览器        open:true,        // 默认打开的页面        openPage:'index.html',        // 接口代理，作用相当大        proxy:{            "/api":{                target:"http://lemall.futurefe.com"            }        }    }}

到此我们完成了大部分代码规则的配置，接下来，我们需要再添加两个小配置：.babelrc和postcss

创建.babelrc文件

{    "presets":[        "@babel/preset-env",        "@babel/preset-react"    ]}

注：Vue项目使用第一个，React项目使用第二个

@babel/preset-env 是 Vue babel插件

@babel/preset-react 是 React babel插件

添加postcss配置

通常有些项目会使用postcss.config.js，我们这儿推荐修改package.json，添加对应配置。

打开package.json，添加如下代码：

"postcss": {  "plugins": {    "autoprefixer": {}  }},"browserslist": [  "> 1%",  "last 2 versions"]

到此我们的项目全部配置完成，接下来，就添加运行脚本：

在scripts里面增加build和serve

"scripts": {    // 生产打包    "build": "webpack",    // 本地启动服务    "serve": "webpack-dev-server"  },

OK，接下来，运行cnpm run build即可打包代码：

开启本地服务：

最后，我们尝试添加图片代码，看看是否能解析：

1. 拷贝图片到public下面

2. 在app.vue中添加img标签

<div class="app">    <h1>欢迎学习webpack4.42知识h1>    <p>{{title}}p>    <p>欢迎关注：前端未来，关乎你的未来p>    <img src="/imgs/qrcode.jpg" alt="">div>

项目会自动热更新，截图如下：

代码已上传Github，有需要的同学，可自行下载：

https://github.com/JackySoft/webpack-demo

同样，大家可以模仿此文章打包React项目，React项目本身是jsx语法，通过babel-loader解析即可，代码基本不动，大家只需要添加React代码即可编译运行。

关注前端，关注未来，关乎你的未来