zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    Java 老兵不死,Kotlin 蓄势待发
    程序员写代码时戴着耳机,在听什么?
    推荐 7 个提升前端编程效率的 VSCode 插件
    去掉烦人的 !=null
    透析!软件开发未来 10 年的 8 个趋势
    10月01日总结
    09月29日总结
    09月28日总结
    09月27日总结
    09月26日总结
  • 原文地址:https://www.cnblogs.com/yh6652210/p/11247038.html
Copyright © 2011-2022 走看看