webpack搭建vue项目实现脚手架功能

在今天学习webpack搭建前端环境时候咱们应该先熟知node有关的知识，用node.js来安装一个包。便于咱们更好的理解。

一：什么是webpack

1.本质上，Webpack 是一个现代 JavaScript >应用程序的静态模块打包器（static module >bundler）。在 Webpack 处理应用程序时，它会在内部建立一个依赖图（dependency >graph），用于映射到项目须要的每一个模块，而后将全部这些依赖生成到一个或多个 bundle。

2.webpack是一个静态资源构建，打包的工具
复制代码

二：webpack能解决什么问题？

Webpack 能够作到按需加载。像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程当中作不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程当中是不关心的。

Webpack 跟其余构建工具本质上不一样之处在于：Webpack 是从入口文件开始，通过模块依赖加载、分析和打包三个流程完成项目的构建。在加载、分析和打包的三个过程当中，能够针对性的作一些解决方案，达到按需加载的目的，好比code split（拆分公共代码等）。

固然，Webpack 还能够轻松的解决传统构建工具解决的问题：

1.模块化打包，一切皆模块，JS 是模块，CSS 等也是模块；

2.语法糖转换：好比 ES6 转 ES五、TypeScript；

3.预处理器编译：好比 Less、Sass 等；

4.项目优化：好比压缩、CDN；

5.解决方案封装：经过强大的 Loader 和插件机制，能够完成解决方案的封装，好比 PWA；

6.流程对接：好比测试流程、语法检测等。

三:为何要使用webpack?

1.解耦须要： 使用SPA（Single-page Application，单页面应用）开发大型项目时，解决模块之间的解耦和维护问题；

2.前端工程化须要：

前端开发逐渐向工程化演进，理解前端框架的项目构建的流程（如React、Vue、Angular）；

3.项目扩展须要：

理解Webpack核心概念（如Babel加载器、Plugin插件），便于项目协同开发与项目整合；

4.面试须要：

进入一线互联网公司的必备技能；

四：webpack搭建前端开发环境

首先要有node环境，进入Node.js的官网，选择对应系统下载安装包。安装node后集成了npm管理器

4.1安装模块

1.咱们建立一个项目文件夹并进入。例如：webpack_vue

2.咱们打开终端，输入： npm init -y

3.来建立一个package.json

4.安装webpack工具

npm install webpack webpack-cli --save-dev 或者
 npm i webpack webpack-cli -D
复制代码

5.在根目录下建立一个src，而且创建一个index.js.

6..咱们要在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

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的世界里面了