webpack

webpack

1.  webpack是一个模块打包器(和gulp作用相似)

webpack的安装

  1-1   全部安装webpack,为了实际用webpack命令
  2-1   全局安装webpack-cli
  2-3   新建webpack默认配置文件 webpack.config.js

下包 webpack-cli ,
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack  //高版本
或
npm install babel-loader babel-core babel-preset-env webpack  //低版本

• 开发环境 —— src，development
  。程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告
• 生产环境 —— 打包上线，production
  。正式提供对外服务的
• alias : 配置别名

webpack的的四大核心

entry：入口

1. 字符串格式

   entry: path.join(__dirname, "./src/index.js")，

2. 数组格式

  entry: [
          path.join(__dirname, "./src/index.js"),
          path.join(__dirname, "./src/app.js")
   ],

3.对象格式

    entry: { 
		    "index": path.join(__dirname, "./src/index.js"),
		    "app": path.join(__dirname, "./src/app.js"),
    },

注意

• 字符串格式是单入口文件,默认是dist下的main.js.
• 数组格式不常用——了解
• 对象格式是多入口模式

ouput:出口

 output: { 
        path: path.join(__dirname, "build"), //编译之后的文件路径,build是生成的文件夹
        filename: "app.js", //filename是重命名
    },

• filename: “[hash]-[name].js” //这个是多入口文件的时候,就使用[name].js；

loader：所有的加载器=>主要是来解析非js文件的

loader需要下载的包

	npm i  babel-laoder  @babel/core  @babel/preset-env
	npm i  style-loader  css-loader
	npm i  url-loader   //图片加载器
	npm i  file-laoder  // 字体图标
	npm i  style-loader scss-loader  node-sass
	npm i  html-loader 

module: { 
        rules: [{
                //js
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }

            }, {
                //css
                test: /\.css$/,
                use: ["style-loader", "css-loader"]

            }, {

                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: "url-loader",
                    options: { //设置啊当前loader的配置项
                        limit: 8192,
                        name: "./img/[name].[ext]" //放到img文件夹里面
                    }
                }]

            }, {
                //字体图标
                test: /\.(svg|woff|ttf|eot)/,
                loader: "file-loader", //小文件类型
                options: {
                    name: "./font/[name].[ext]"
                }

            }, {
                //sass  //pro
                test: /\.scss$/,
                // use: ["style-loader", "css-loader", "sass-loader"],
                use: ExtractTextPlugin.extract({ //抽离
                    fallback: "style-loader",
                    use: ["css-loader", "sass-loader"],

                })
            }, {
                test: "/\.html/",
                loader: "html-loader" //解决html上的img图片引入的问题
            }

        ]
    },

加载器注意点babel-loader

• 因为之前的加载器版本略低,解析不了,所以需要创建.babelrc

 module: {
    rules: [
         babel - loader //配置项
        新建.babelrc
      "presets": [
             "@babel/preset-env"
  ]
  在loader里面写 
	{
	       test: /\.(js|jsx)$/, //匹配文件
	    loader: "babel-loader", //加载loader
	   options: {
	        "presets": ["@babel/preset-env"]
	       }
	      }
	     ]
	}

配置环境命令-》正常webpack

默认webapck.config.js

• webpack
• webpack-dev-server

webpack.dev.js的命令

• 文件命令 npm run build
• 服务命令 npm run dev

   "build": "webpack --config webpack.dev.js  --mode production",
   "dev": "webpack-dev-server --config webpack.dev.js --mode production"

plugins 插件后面数组

• 先下载插件
• 在用require引入
• 调用 new 变量名
• 注意 下载抽离的下一个版本 npm i extract-text-webpack-plugin@next
• 使用热更新插件只需下载webpack,无需下载热刷新插件。

需要下载的插件：
  const HtmlWebpackPlugin = require('html-webpack-plugin'); 
  const clean=require("clean-webpack-plugin")
  const webpack = require('webpack'); // 用于访问内置插件,后面紧跟热刷新
  const ExtractTextPlugin=require("extract-text-webpack-plugin")
plugins: [
         new ExtractTextPlugin("style1.css"), //抽离css
         new Cleanwebpack(), //清空
         new HtmlWebpackPlugin({
             template: "index.html", //要编译的模板
             filename: "app.html", //修改成功的
             title: "1701B",
             inject: true, //是否注入js,css,默认是true,
             minify: { //了解
                  removeAttributeQuotes: true, //去除引号
                  collapseWhitespace: true, //去除空格
                  removeComments: true, //去除注释
                  removeEmptyAtrributes: true, //去除空属性

             }
        }),
        new webpack.HotModuleReplacementPlugin(),  //热刷新调用
    ],		

起服务

• 需要下载 webpack-dev-server

devServer: {
        port: 9097,
        open: true,
        host: "localhost",
        hot: true,
        inline：true,
        before(app) {
            app.get("/list", (req, res, next) => {
                res.send({ code: 1, data: list });
            })
        }
    }
    //	启动服务之后形成的build文件夹是虚拟的，需要在执行生产命令才会有真实文件。