webpack安装及初使用

在使用学习vue开发之前需要学会npm，webpack，ES6，axios

webpack安装及使用

在安装之前首先需要安装npm了解如何使用

首先在终端输入npm -v查看自己npm是否安装及版本
之后通过npm init -y命令可以生成一个package.json文件。

这里我总也没自动办法生成文件
之后发现是文件名字非法，改成英文名即可``

之后输入npm i webpack webpack-cli -D即可安装webpack5及脚手架
webpack打包：webpack --mode development
打包时使用vscode可能会出现以下情况

这时需要先输入：Set-ExecutionPolicy -Scope CurrentUser
之后输入：RemoteSigned
解决
打包好会出现dist文件夹

打包可以指定入口文件以及出口文件：
webpack [./src/index.js] -o [./build/build.js] --mode development
中括号标注的为可更改内容

打包常用方法

在最大的目录下创建webpack.config.js文件
之后填入数据即可指定各种模式，入口及出口
例：

这样只需要在终端输入webpack即可按照指定方法打包

若要使用html打包，只需用如下指令下载： npm i html-webpack-plugin -D
使用css打包同样需要指令下载：npm i css-loader style-loader -D
先将所要打包的css文件引入入口文件：require(’./demo.css’);
若要将css文件提取为单独文件还需下载插件：npm i mini-css-extract-plugin -D，下载完之后需要在配置文件中引入

自动打包

下载
npm i webpack-dev-server -D
监听：webpack serve
配置文件设置：target:“web”
这样当我们每次改动时，会自动打包编译
Ctrl+c退出监听
可以更改端口：webpack serve --port 5500

配置文件概要

const {resolve} = require('path');  //在nodejs中寻找方法
const HtmlWebpackPlugin = require('html-webpack-plugin');//引用html打包插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //引入css打包单独提取插件

module.exports = {
    mode:'development',  //生产模式
    // 如果只有一个入口，使用字符串，指定一个入口文件
    // 若多入口，可以设置为数组格式： entry:["",""],输出只有一个
    // 也可设置成对象，但输出为入口有几个，输出就为几个，名字为下标
    // 也可以用特殊方法，即对象内存数组{one:["",""],two:""},这样可以让交叉打包，输出时需要filename:[name].js样式输出
    entry:'./src/index.js',   //入口

    output:{
        filename:"build.js",  //指定输出文件名
        path:resolve(__dirname,'build')   //指定输出目录名
    },

    module:{
        rules:[
            // loader  处理非js资源（css等）
            {
                test:/\.css$/  ,//匹配规则，这里正则找所有css文件
                //use:['style-loader','css-loader']   //这里顺序不能反，从右至左执行(会加入style标签不能生成单独文件)
                use:[MiniCssExtractPlugin.loader,'css-loader']  //这样就可以生成独立文件（直接调用插件配合使用）
            }
        ]
    },

    plugins:[
        // 默认会创建一个空的，目的就是自动引入打包的资源（js/css）
         new HtmlWebpackPlugin({
             template:"./src/index.html",
             filename:"demo.html",
             chunks:"build",  //这里可以指定加载的js文件，如有多个变数组形式
            //  minify:{
            //      //移除空格，达到压缩html效果
            //      collapseWhitespace:true
            //  }
         }),
         //提取css为单独文件插件，只需要new一下就可以
         new MiniCssExtractPlugin({
             filename:'name.css',  //自己命名输出文件名
         })
    ],   //插件（可以打包html）

    target:"web"    //加上这个才能自动刷新
}

index.js文件（入口文件）概要

// 这个文件为入口文件，打包会自动寻找src文件夹
import {sum} from "./two.js";  //引入其他js文件
require('./demo.css');  //这里让入口文件引入css文件（因为打包要在入口文件开始打包）
// 这里达到了一种层层递进关系，one暴露方法给two，two获取one暴露的方法执行并暴露，然后暴露并被index获取
console.log(sum);
console.log(222);
// 打包