基于webpack搭建vue的开发环境

一、前端构建工具

grunt gulp webpack（主流） fis3(百度）

二、webpack是什么

webpack是一个现代javascript应用程序的静态模块打包器
webpack稳定版本：v4.44

三、如何使用webpack搭建前端环境

1.安装node.js

注意：如果npm安装一下包由于网络原因安装慢，切换一下镜像源
改成淘宝镜像npm config set registry https://registry.npm.taobao.org
查看是否更改过来：npm config list

2.创建项目目录并初始化package.json

npm init -y

3.安装webpack和webpack.cli

npm install webpack webpack-cli --save-dev
简写：npm i webpack webpack-cli -D

4.运行webpack测试
commonJS规范：基于服务端模块化规范
抛出：module.exports
引入：require
es6 module
import *** from “路径”
export default{}

5.webpack支持的文件类型
（1）默认只支持js和json文件的引入

注意：如果在js中要引入其他类型 .css ,.png字体文件或其他任意文件类型，解析时都需要安装合适的loader来进行解析处理

6.webpack配置文件
（1）默认配置文件名：webpack.config.js
（2）如果想要运行其他文件 webpack --config webpack.dev.config.js
（3）配置文件是webpack的核心，所有的Loader和插件环境，运行环境配置都在配置文件中配置使用

const webpack=require("webpack")  //引入webpack
const path=require("path")   //引入path,对路径进行处理
const config={  //创建一个配置对象
			mode:"development"   //线上线下开发环境
			entry:"./src/main.js"   //配置入口
			output:{   //配置出口
				path:path.resolve(__dirname,"dist")  //出口路径
				filename:"bundle.js"  //出口文件名
			}
		}
module.exports=config

7.配置各种loader(文件解析器）
（1）解析css的loader style-loader ,css-loader

npm install --save-dev css-loader style-loader

（2）解析图片的loader file-loader url-loader

npm install --save-dev file-loader

（3）解析ES6/7/8/9/10

npm install babel-loader babel-core babel-preset-env webpack

8.自动清理文件

npm install clean-webpack-plugin --save-dev
引入：const {CleanWebpackPlugin}=require("clean-webpack-plugin")
使用：创建一个配置对象
const config={
	plugins:[new CleanWebpackPlugin() ]    //自动清空dist目录
	}  

9.自动注入

npm install --save-dev html-webpack-plugin
引入：  const HtmlWebpackPlugin=require("html-webpack-plugin")
使用：	const config={
			plugins:[
				new HtmlWebpackPlugin({
					template:"./src/index.html"
					filename:"home.html})]
				}

10.运行环境
webpack-dev-serve
配置文件中：

devServer:{contentBase:path.join(.dirname,"dist"}

11.webpack核心概念

1. 入口 entry 指定项目执行的主入口
2. 出口output 构建输出的文件路径和文件名
3. 加载器 loader 转换webpack不识别的文件类型
4. 插件 plugins 为了扩展webpack的功能，例如：清理文件，自动注入
5. 模式 mode 切换开发环境（development）还是线上（production）环境

12.与vue集成
vue-loader 解析vue文件
vue-template-compiler
vue-style-loader

安装：  npm install vue-loader  vue-template-compiler  -D
配置webpack文件：{ test: /\.vue$/, use: ['vue-loader'] },
实例化vueLoaderPlugin插件
const {VueLoaderPlugin}=require("vue-loader")
添加实例化插件
plugins:{new vueLoaderPlugin()}

13.与sass集成

安装：npm install sass-loader  node-sass -D
配置：  module:{
			rules:[{ test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }]

14.与less集成

安装： npm install less-loader node-less -D
配置：  module:{
		rules:[{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },]

15.与vue-router集成

安装：npm install vue-router  -D

16.与vuex集成

安装：npm install vuex -D

17.完整的webpack.config.js文件如下：

//引入webpack,主要用于对webpack内置插件调用时使用
const webpack = require('webpack')
    //引入path，对路径进行处理
const path = require('path')
    //引入清理插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//引入htmlwebpckPlugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
    //引入VueLoaderPlugin
const { VueLoaderPlugin } = require('vue-loader')
//创建一个配置对象
const config = {
    //线上线下环境
    mode: 'production',
    //配置入口
    entry: './src/main.js',
    //配置出口
    output: {
        //出口路径
        path: path.resolve(__dirname, 'dist'),
        //出口文件名
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // {test:/\.要解析的文件类型$/,use:['要使用的loader']},
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.vue$/, use: ['vue-loader'] },
            { test: /\.(png|jpg|jpeg|gif)$/, use: ['file-loader'] },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    },
    //配置缺少文件类型
    resolve: {
        extensions: ['.js', '.json', '.vue']
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new webpack.BannerPlugin('项目的入口'),
        new VueLoaderPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        port: 9999,
        hot: true
    }
}
module.exports = config;