当前前端开发，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
欢迎学习webpack4.42知识
欢迎学习webpack4.42知识 {{title}}
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 -Dwebpack-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即可打包代码：
开启本地服务：
最后，我们尝试添加图片代码，看看是否能解析：
拷贝图片到public下面
在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代码即可编译运行。
关注前端，关注未来，关乎你的未来
