webpack搭建vue项目实现脚手架功能
使用webpack集成vue脚手架
在今天学习webpack搭建前端环境时候我们应该先熟知node有关的知识，用node.js来安装一个包。便于我们更好的理解。
一：什么是webpack
- 本质上，Webpack 是一个现代 JavaScript >应用程序的静态模块打包器（static module >bundler）。在 Webpack 处理应用程序时，它会在内部创建一个依赖图（dependency >graph），用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。
- webpack是一个静态资源构建，打包的工具
二：webpack能解决什么问题？
Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。
Webpack 跟其他构建工具本质上不同之处在于：Webpack 是从入口文件开始，经过模块依赖加载、分析和打包三个流程完成项目的构建。在加载、分析和打包的三个过程中，可以针对性的做一些解决方案，达到按需加载的目的，比如code split（拆分公共代码等）。
当然，Webpack 还可以轻松的解决传统构建工具解决的问题：
-
模块化打包，一切皆模块，JS 是模块，CSS 等也是模块；
-
语法糖转换：比如 ES6 转 ES5、TypeScript；
-
预处理器编译：比如 Less、Sass 等；
-
项目优化：比如压缩、CDN；
-
解决方案封装：通过强大的 Loader 和插件机制，可以完成解决方案的封装，比如 PWA；
-
流程对接：比如测试流程、语法检测等。
三：为什么要使用webpack?
-
解耦需要：
使用SPA（Single-page Application，单页面应用）开发大型项目时，解决模块之间的解耦和维护问题； -
前端工程化需要：
前端开发逐渐向工程化演进，理解前端框架的项目构建的流程（如React、Vue、Angular）；
-
项目扩展需要：
理解Webpack核心概念（如Babel加载器、Plugin插件），便于项目协同开发与项目整合；
-
面试需要：
进入一线互联网公司的必备技能；
四：webpack搭建前端开发环境
首先要有node环境，进入Node.js的官网，选择对应系统下载安装包。安装node后集成了npm管理器
4.1 安装模块
- 我们创建一个项目文件夹并进入。例如：webpack_vue
- 我们打开终端，输入：
npm init -y
- 。来创建一个package.json
- 安装webpack工具
npm install webpack webpack-cli --save-dev
简写：
npm i webpack webpack-cli -D
4.在根目录下创建一个src，并且建立一个index.js.
5.我们要在package.json的script里面 加一个
“build”：“webpack”
我们直接npm run build 来运行
这个时候奇迹的事情就发生了，自动构建了一个dist的目录，并且生成了一个main.js 的文件.
4.2 配置文件
我们在手动配置文件的时候需要创建一个webpack.config.js。在这里面配置文件并且抛出模块
入口（entry），出口（output），plugin（配置插件）,加载器（loader）
（1）配置入口（entry）
module.exports = {
mode: "development", //设置我们的环境 是线上还是线下 这里我们设置的是线下的 线上的为production
entry: "./src/index.js",//入口文件
（2）配置出口（output）
const path = require('path');//我们也需要引入path模块 ，因为引入路径的时候要用到。
//配置出口
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),//出口的文件夹
filename: "bundle.js"//文件夹的名字
},
注意我们在运行时候可能会出现一个黄色的警告，那么我们如何消除这个警告呢。
第一步： npm install --save-dev clean-webpack-plugin
第二步： 在webpack.config.js中引入
第三步：通过plugins实例化
module.exports = {
plugins: [
new CleanWebpackPlugin(),
};
(3)配置加载器 （loader）
//webpack通过loader识别文件的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(jpg|jpeg|png|gif)$/, use: ['url-loader'] },
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
（4） plugin 引入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
//添加文件清理的插件
//实例化
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html', //读取模板的入口文件
filename: 'index.html' //生成打包后的html文件
}),
new VueLoaderPlugin()
],
4.3 搭建本地服务
1.安装依赖：
npm install webpack-dev-server -D
//启服务器环境
devServer: {
//配置端口号
port: 9999,
//可以实现热更新
hot: true,
//服务器在内存中监听目录
contentBase: path.join(__dirname, 'dist'),
}
五：集成vue
5.1
- 安装es6的包：babel
1.npm install --save-dev babel-loader @babel/core @babel/preset-env
2.配置webpack
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
3.在项目根目录下创建.babelrc配置文件
{
"presets": ["@babel/preset-env"]
}
5.2安装vue包
安装：
vue-loader,vue-template-compliler
配置vue插件并在plugin中实例化插件：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
...
//实例化vue插件
new VueLoaderPlugin()
],
拓展
当然呢，我们也可以用sass啊less进行编译，那么我们同样要做的就是我们安装包，然后再webpack.config.js里面引入，然后我们在plugin里面引入 ，实例化
webpack识别less:
npm install less less-loader -D
**webpack识别sass:**
```bash
npm install sass-loader node-sass -D
webpack识别图片或其他文件
npm install url-loader -D
那么接下来我们就可以下载vuex vue-router啊等，尽情的畅游在vue的世界里面了。以上呢，是我个人对于学习这个的理解，欢迎大家随时补充~