webpack的配置以及使用

新建一个文件

1.初始化项目

cnpm init -y

2.安装webpack

cnpm install webpack webpack-cli -D

3.在新建的文件夹下面新建一个src文件夹

4.在新建的文件下面创建一个webpack.config.js文件，在该文件里面进行webpack的配置

//引入path模块

const path = require("path");

webpack配置：

在module对象中配置loader，将浏览器不识别的语法转化为浏览器识别的语法

5.安装解析JS的babel文件

 cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

识别后缀名为js的文件（添加在reluse数组中）

 {
                text:/.(js)$/,
                use:{
                    loader:"bable-loader",
                    options:{
                        //ES6转ES5的配置规则
                        presets:["@babel/env"]
                    }
                }
            }

6.安装解析css的loader文件

 cnpm install --save-dev style-loader css-loader  sass-loader node-sass

识别后缀名为css的文件

 {
                test:/.(css|scss)$/,
                //css loader执行的顺序  从右到左 从下到上
                use:["style-loader","css-loader","sass-loader"]
            },

7.安装html插件

cnpm install -D html-webpack-plugin

用法：

先引入

const htmlWebpackPlugin = require("html-webpack-plugin");

 plugins:[
        new htmlWebpackPlugin({
            filename:"index.html",
            template:"index.html",
            title:"Vue"  模板文件
        }),
        new VueLoaderPlugin()
    ],

 8.安装处理图片的loader

 cnpm install url-loader file-loader -D

  {   

                test:/.(jpg|png|gif)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:2048
                    }
                }
            },

当图片的大小小于2048的时候用url-loader做解析
大于2048的时候用file-loader做解析 系统会自动去找file-loader

url-loader:解析的时候会解析成base64的形式
file-loader会解析成原本的形式

9.安装处理vue的文件loader

 cnpm install -D vue-loader vue-template-compiler

 {
                test:/.vue$/,
                loader:"vue-loader"
            }

10.安装vue.js

cnpm install vue -S

11.安装服务器环境

cnpm install webpack-dev-server -D  

安装以后在package.json文件夹中将

"test": "echo "Error: no test specified" && exit 1"  改为  "dev": "webpack-dev-server"

然后执行cnpm run dev