vue-day03----webpack搭建vue环境、移动端适配

### webpack搭建vue环境

    webpack工作原理：将入口文件需要的所有文件通过loader进行打包，在需要的时候直接引入。

    1、初始化文件夹

        创建webpackproject文件夹，在终端中打开，npm init -y

    

    2、安装webpack以及webpack-cli

        npm install webpack [email protected] -D

        注意：这里确定webpack-cli的版本号，防止报错

    

    3、创建config文件夹做开发环境和生产环境的配置

        webpackproject文件夹下新建config文件夹，新建三个文件：

            base.congif.js

            dev.congif.js

            pro.congif.js

    4、创建src目录以及public目录

        src下新建main.js（入口文件）

        public下新建index.html

    

    5、webpack基本配置项

        entry

        output

        reslove

        plugins

        module

 

    6、plugins常用的插件

        html-webpack-plugin

        clean-webpack-plugin

        copy-webpack-plugin

        extract-text-webpack-plugin----css加浏览器前缀，dev.config.js中使用

        npm install html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D

        注意：

            ①extract-text-webpack-plugin的安装： npm i extract-text-webpack-plugin@next -D

            ②extract-text-webpack-plugin的使用，需要在package.json的同级目录下新建postcss.config.js：

                module.exports = {
                    plugins:[
                        require("autoprefixer")({
                            overrideBrowserslist:[
                                "defaults",
                                "Android 4.1",
                                "iOS 7.1",
                                "Chrome>31",
                                "ff>31",
                                "ie>=8",
                                "last 2 versions",
                                ">0%"
                            ]
                        })
                    ]
                }

    

　7、常用的loader

        ①处理js的loader：

            babel-loader

            @babel/core

            @babel/preset-env

            npm install babel-loader @babel/core @babel/preset-env -D

        ②处理图片的loader

            url-loader

            file-loader

            npm install url-loader file-loader -D

        ③处理css的loader

            style-loader

            css-loader

            sass-loader

            node-sass

            postcss-loader

            autoprefixer

            npm install style-loader css-loader sass-loader node-loader postcss-loader autoprefixer -D

        ④处理vue单文件组件loader

            vue-loader----解析单文件组件

            vue-template-compiler

            npm install vue-loader vue-template-compiler -D

        根目录下创建 .babelrc 文件，配合babel-loader使用：

            {
                "presets":[
                    [
                        "@babel/preset-env",
                        {
                            "targets":{
                                // 配置项兼容到浏览器的最后两个版本
                                "browsers":["last 2 version"]
                            }
                        }
                    ]
                ]
            }

    8、合并webpack配置项

        npm install webpack-merge -D

    

    9、webpack服务

        npm install webpack-dev-server -D

    启动：

        在package.json中scripts对象中添加 

　　　　"build":"webpack --progress --config config/base.config.js"

        npm run build

        当pro.config.js文件写好后，改为 

　　　　"build":"webpack --progress --config config/pro.config.js"

        在package.json中scripts对象中添加 

　　　　"dev":"webpack-dev-server --profress --config config/dev.config.js"

        npm run dev ----> 地址栏输入localhost:9000

### 移动端适配

    设置--->搜索cssrem--->

        Fixed Digits 改为2----默认小数点后几位

        Root Font Size 改为 50

    index.html中引入reset.css

 

 

 

各个文件：

base.congif.js：

/**
 *  公用环境
 * 
 * 
 */
const path=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
const CopyWebpackPlugin=require("copy-webpack-plugin");
const VueLoaderPlugin=require("vue-loader/lib/plugin");

// 定义入口和出口文件路径
const PATH={
    app:path.join(__dirname,"../src/main.js"),
    build:path.join(__dirname,"../dist")
}

// 基本配置
module.exports={
    entry:{
        app:PATH.app
    },
    output:{
        path:PATH.build,
        // process.env.NODE_ENV     用来判断是开发环境还是生产环境
        filename:process.env.NODE_ENV=="development"?"js/[name].[hash:8].js":"js/[name].js"
    },
    // 配置文件的有限引入方式   别名
    resolve:{
        extensions:[".vue",".js"],
        // 配置别名
        alias:{}
    },
    // 使用插件
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            filename:"index.html",
            favicon:"./src/image/01.ico"
        }),
        new CopyWebpackPlugin([{
            context:path.join(__dirname,"../public"),
            from:"**/*",
            to:path.join(__dirname,"../dist"),
            ignore:["index.html"]
        }]),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:"vue-loader"
            },
            {
                test:/\.js$/,
                loader:"babel-loader"
            },
            {
                test:/\.(jpg|gif|png|svg)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:2048,
                        name:"img/[name].[ext]"
                    }
                }
            },
            {
                test:/\.(svg|woff|woff2|ttf|eot)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        name:"font/[name].[ext]"
                    }
                }
            }
        ]
    }
}

dev.congif.js：

/**
 *  开发环境
 * 
 * 
 */
const baseConfig=require("./base.config");
const webpackMerge=require("webpack-merge");

const config=webpackMerge(baseConfig,{
    mode:"development",
    module:{
        rules:[
            {
                test:/\.(css|scss)$/,
                use:["style-loader","css-loader","sass-loader"]
            }
        ]
    },
    devServer:{
        port:9000
    }
});

module.exports=config;

pro.congif.js：

/**
 *  生产环境
 * 
 * 
 */
const baseConfig=require("./base.config");
const webpackMerge=require("webpack-merge");
const ExtractTextPlugin=require("extract-text-webpack-plugin");

const config=webpackMerge(baseConfig,{
    mode:"production",
    module:{
        rules:[
            {
                test:/\.(css|scss)$/,
                // css抽离
                use:ExtractTextPlugin.extract({
                    fallback:"style-loader",
                    use:["css-loader","postcss-loader","sass-loader"]
                })
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin({
            filename:"css/[name].[hash:8].css"
        })
    ]
});

module.exports=config;

main.js：

import Vue from 'vue';
import App from "./App.vue";

new Vue({
    render:h=>h(App)
}).$mount("#app");// #app是public/index.html中id为app的div

/**
 * render（提供）是一种编译方式
 *      render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。
 *      template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。
 * 
 *      createElement(标签名称,属性配置,children)
 * 
 * 
 */

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        /* html{
            font-size: 32vw;
        } */
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>